1. 頁(yè)面內(nèi)引用的對(duì)象,必須在對(duì)應(yīng)的.js文件中聲明甸私,通過(guò)關(guān)鍵字Page + data
Page ({
data : {
product : {
price : 10,
num : 5
}
}
)}
2. 給按鈕添加點(diǎn)擊事件 + 傳值
// bind:tap
<button bind:tap="btnClick_numAdd_1">num + 1</button>
// bind:tap + data-step
<button bind:tap="btnClick_numAdd_N" data-step="5">num + N</button>
// 值的接收 .js 文件:
btnClick_numAdd_N(event){
console.log(event.target.dataset.step)
}
3.雙向綁定:讀 + 寫(xiě)
// 以 input 輸入框組件為例, 讀 value , 寫(xiě) bindinput
<input class="productM" type="num" bindinput="InputEvent" value="{{product.num}}"/>
4..wsml中症脂,如果要引用.js中的數(shù)據(jù),要用 {{}} 包裹
{{product.num}}
5..js 中,通過(guò)setdata賦值诱篷,會(huì)觸發(fā)刷新壶唤,所有與該值相關(guān)的組件都會(huì)刷新。
- 通過(guò) ({}) 包裹數(shù)據(jù)棕所;
- 以鍵值對(duì)的形式賦值闸盔;
- 二級(jí)key用單引號(hào)'引用;
this.setData ({
'product.num' : this.data.product.num + parseInt(event.target.dataset.step)
})
6.條件渲染 wx:if 琳省、hidden
<view class="AView">
<!-- 條件渲染迎吵,wx:if 、wx:elif针贬、wx:else
判斷條件都在 {{ }} 內(nèi)
如果文案引起編譯錯(cuò)誤击费,那么用 {{ }} 包裹,''桦他、 + 等符號(hào)拼接
-->
<!-- 條件渲染蔫巩,hidden 與 wx:if 的區(qū)別在于,hidden是一定會(huì)被渲染瞬铸,不滿(mǎn)足條件時(shí)隱藏批幌,而wx:if條件不滿(mǎn)足時(shí)不渲染,需要頻繁隱藏嗓节、顯示切換時(shí)荧缘,用hidden可以減少渲染開(kāi)銷(xiāo) -->
<text wx:if="{{product.num < 50}}">小于50</text>
<text wx:elif="{{product.num < 100}}">{{'<' + '100'}}</text>
<text wx:else="">what ever</text>
</view>
<view>
<text hidden="{{ !(product.num < 50) }}">小于50</text>
<text hidden="{{ !(product.num >= 50 && product.num < 100) }}">{{'<' + '100'}}</text>
<text hidden="{{ !(product.num >= 100) }}">what ever</text>
</view>
7. 循環(huán)渲染 wx: for
// wx:for 需要配合 wx:key,用一個(gè)唯一值來(lái)提高性能拦宣,這里的index用的是默認(rèn)下標(biāo)截粗,item是默認(rèn)元素
<block wx:for="{{ products }}" wx:key="index">
<view>{{ index + item.name + ' ' + item.price}}</view>
</block>