微信小程式開發第三篇 資料繫結,點選事件,陣列迴圈
阿新 • • 發佈:2019-02-06
前面介紹了註冊以及專案結構,現在開始開發吧。
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>
這樣就可以了