- MVVM模式與傳統(tǒng)前端開發(fā)模式的區(qū)別是磅氨，數(shù)據(jù)綁定讓邏輯層不再操控DOM
<!-- 數(shù)據(jù)與事件綁定-->
<view>{{message}}</view>
<view>{{message+"+簡單運(yùn)算"}}</view>
<!-- 條件語句 -->
<view wx:if="{{status}}">1</view>
<view wx:else>2</view>
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
<!-- 循環(huán)語句 -->
<view wx:for="{{listData}}" wx:key="id">
{{index}}: {{item.name}}
</view>
<!-- 三元運(yùn)算 -->
<view hidden="{{flag ? true : false}}"> Hidden </view>
<!-- 事件與冒泡 -->
<!-- bind事件綁定不會(huì)阻止冒泡事件向上冒泡朱躺，catch事件綁定可以阻止冒泡事件向上冒泡羞福。 -->
<view id="preparent" bindtap="onPreparentTap">
<view id="child" catchtap="onChildTap">
<view id='test' bindtap="onTap">Click me!</view>
</view>
</view>
// 頁面邏輯
Page({
data: {
message:"數(shù)據(jù)綁定",
status:false,
listData:[
{ id: 1, name: "列表第一項(xiàng)" },
{ id: 2, name: "列表第二項(xiàng)" },
{ id: 3, name: "列表第三項(xiàng)" }
]
},
onTap: function (event) {
console.log(event)
console.log("子級")
},
onChildTap: function (event) {
console.log("父級")
},
onPreparentTap: function (event) {
console.log(event)
console.log("爺級")
}
})
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
