变量的定义和使用
在小程序中对应的.js文件里面的data区块定义变量,然后在对应的.wxml页面使用变量。下面通过案例来讲解。
.js文件中变量的定义示例如下:
data: {
myvar01: "我是变量01",
myvar02: "我是变量02",
},
WXML 中的动态数据均来自对应 Page 的 data。数据绑定使用双大括号将变量包起来。.wxml文件中变量的显示,代码示例如下:
<!--简单变量的使用-->
<view>{{myvar01}}</view>
<view>{{myvar02}}</view>
效果如图9-1所示。
通过事件来改变变量
在小程序中对应的.js文件定义事件来处理内容,然后在对应的.wxml页面使用bindtap来调用事件。
.wxml文件中事件的定义示例如下:
<!--简单变量的使用-->
<view>{{myvar01}}</view>
<view>{{myvar02}}</view>
<!—按钮调用事件setvar01-->
<button bindtap='setvar01' type='primary' style='width:90%'>
通过事件来改变变量的值
</button>
.js文件中事件的定义示例如下:
setvar01:function() //定义事件
{
//myvar01:"我是变量01改变后的值"
//直接写是错误的,需要用setData
this.setData({
myvar01: "我是变量01改变后的值"
})
},
点击前和点击后的效果图见效果如图9-2和图9-3所示。