數據綁定

index.wxml

<!--index.wxml--> <view class="container"><!-- {{ }} 小胡子語法 專門用于輸出邏輯層暴露的數據--><text>{{message}}</text><!-- input 默認是沒有邊框樣式的 --><!-- mustache 可以作用在元素的 內容 和 屬性 上 --><input value="{{message}}"></input><input value="{{message}}dsihgfrug"></input><text>{{1+1}}</text><text>{{message+1}}</text><!-- 一般情況下，屬性值最好用雙引號引起來，屬性值最好不要省略 --><checkbox checked="true"></checkbox><checkbox checked="checked"></checkbox><checkbox checked></checkbox><!-- 在小程序的wxml中屬性的值 如果只是在雙引號內部 它永遠是字符串 --><!-- 解決方法是借助于小胡子語法 --><!-- mustache 可以用于申明有類型的值 --><checkbox checked=""></checkbox><checkbox checked="dsfijri"></checkbox><checkbox checked="false"></checkbox><checkbox checked="{{false}}"></checkbox><text>{{foo.addPostfix(message)}}</text> </view><!-- wxs標簽 類似于 html中的 script標簽 ，可以定義一些行內腳本--><wxs module="foo">//這里可以導出一個對象，這個對象可以直接在界面上使用 //這里的代碼必須遵循 common js 規范 module.exports={addPostfix:function(input){return input+' wxs'}} </wxs>

index.js

//index.js //獲取應用實例 const app = getApp()Page({//這個對象里面的所有屬性都可以在界面中訪問到// 在 data 中只能暴露數據成員data:{message:'hello world',} })

---

控制屬性

cond.js文件

Page({data:{isLoading:true},onReady(){setTimeout( () => {this.setData({isLoading:false})},2000)} })

cond.wxml文件

<!--pages/cond/cond.wxml--> <view wx:if="{{isLoading}}"><text>Loading……</text> </view> <!-- <view wx:elif=""></view> --> <view wx:else><text>load done</text> </view>

?cond.wxml文件? 又一個版本

<!--pages/cond/cond.wxml--> <view wx:if="{{isLoading}}"><text>Loading……</text> </view> <!-- <view wx:elif=""></view> --> <view wx:else><text>load done</text> </view><!-- 對于頻繁需要被切換顯示的元素 不應該使用 wx:if ,應該用hidden屬性--> <view hidden="{{!isLoading}}"><text>Loading……</text> </view> <view hidden="{{isLoading}}"><text>load done</text> </view><view ><!-- block 只是一個包裝元素，不會對界面的結構造成任何影響 --><block wx:if="{{isLoading}}"><text >hello</text><text >world</text></block><text>不要影響我</text> </view><view><text wx:if="{{isLoading}}">hello</text><text wx:if="{{isLoading}}">world</text> </view>

---

each.wxml

<!--pages/each/each.wxml--> <view wx:for="{{students}}" wx:for-item="s" wx:for-index="i" wx:key="aaa"> <!-- {{index}} 拿到當前遍歷的下標 --><!-- <text>{{index}}</text> --><text>{{i}}</text><text>name:{{s.name}}</text><text>age:{{s.age}}</text> </view>

each.js

// pages/each/each.js Page({/*** 頁面的初始數據*/data: {students:[{id:1,name:'止兮',age:18},{id:2,name:'蒼凌',age:19},{id:3,name:'瑾修',age:20},{id:4,name:'小草',age:17}]} })

---

each.wxml

<!--pages/each/each.wxml--> <view><view wx:for="{{students}}"><checkbox></checkbox><text>{{item.name}}</text></view> </view> <button bindtap="addItemHandle">add</button>

each.js

// pages/each/each.js Page({/*** 頁面的初始數據*/data: {students:[{id:1,name:'止兮',age:18},{id:2,name:'蒼凌',age:19},{id:3,name:'瑾修',age:20},{id:4,name:'小草',age:17}]},// 頁面對象上除了 生命周期的鉤子函數之外，可以定義任何其他的函數，// 這些函數可以作為視圖層(界面)元素的事件處理函數addItemHandle(){const students=this.data.studentsstudents.push({ id: Math.random(), name: '小草' + Math.random(), age: 17})this.setData({students})} })

---

each.wxml

<!--pages/each/each.wxml--> <view><!-- wx:key 屬性值 寫的是 遍歷的數據單項屬性名稱 --><!--如果沒有屬性的話， 可以通過 *this 這個保留值 去指定當前被遍歷的元素 --><!-- <view wx:for="{{students}} " wx:key="id"> 有了一個空格，變成了字符串的拼接，界面就變得很亂 --><view wx:for="{{students}}" wx:key="id"><checkbox></checkbox><text>{{item.name}}</text></view> </view> <text wx:for="foo">--{{item}}--</text> <button bindtap="addItemHandle">add</button>

each.js

// pages/each/each.js Page({/*** 頁面的初始數據*/data: {students:[{id:1,name:'止兮',age:18},{id:2,name:'蒼凌',age:19},{id:3,name:'瑾修',age:20},{id:4,name:'小草',age:17}],nums:[1,2,3,4,5,6]},// 頁面對象上除了 生命周期的鉤子函數之外，可以定義任何其他的函數，// 這些函數可以作為視圖層(界面)元素的事件處理函數addItemHandle(){// const students=this.data.students// students.push({ id: Math.random(), name: '小草' + Math.random(), age: 17})const students = [{ id: Math.random(), name: '小草' + Math.random(), age: 17 }].concat(this.data.students)this.setData({students})} })

總結

以上是生活随笔為你收集整理的微信小程序开发2——数据绑定、控制属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。