微信小程式開發第三篇 資料繫結，點選事件，陣列迴圈

前面介紹了註冊以及專案結構，現在開始開發吧。

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>

這樣就可以了