微信小程序开发第三篇 数据绑定，点击事件，数组循环

前面介绍了注册以及项目结构，现在开始开发吧。

1。数据绑定，如果学过vue.js的小伙伴应该很快会上手。小程序的数据绑定也是{{}},下面看例子吧

首先清空index.wxml的代码

<view>
<text>{{name}}</text>
</view>

其中view相当于html的div.  接下来在index.js中data（和vue一样）定义变量

然后保存，就可以看见，数据绑定成功了，

2.点击事件（bindtap）

在这里我们使用bindtap点击事件，改变name的名字代码如下

<view>
<text>{{name}}</text>
<button type='success' bindtap='clickName'>点击</button>
</view>

然后在index.js中 写JS

这里就和vue不一样了，需要使用this.setData来改变变量的值，这样就好了。

3.数组循环 wx:for

 

<view  wx:for='{{arrList}}' wx:key='item'>

{{index}}-{{item}}
</view>

 

其中{{index}}代表的就是默认下标，{{item}}代码每一列展示的数据。在data中arrList如下

 

如果我们要循环这样的数组

<view  wx:for='{{arrList}}' wx:key='item.name'>

{{index}}-{{item.name}}--{{item.sex}}
</view>

这样就可以了