微信小程序变量的定义和使用

变量的定义和使用
在小程序中对应的.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所示。