- MVVM模式与传统前端开发模式的区别是,数据绑定让逻辑层不再操控DOM
<!-- 数据与事件绑定-->
<view>{{message}}</view>
<view>{{message+"+简单运算"}}</view>
<!-- 条件语句 -->
<view wx:if="{{status}}">1</view>
<view wx:else>2</view>
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
<!-- 循环语句 -->
<view wx:for="{{listData}}" wx:key="id">
{{index}}: {{item.name}}
</view>
<!-- 三元运算 -->
<view hidden="{{flag ? true : false}}"> Hidden </view>
<!-- 事件与冒泡 -->
<!-- bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。 -->
<view id="preparent" bindtap="onPreparentTap">
<view id="child" catchtap="onChildTap">
<view id='test' bindtap="onTap">Click me!</view>
</view>
</view>
// 页面逻辑
Page({
data: {
message:"数据绑定",
status:false,
listData:[
{ id: 1, name: "列表第一项" },
{ id: 2, name: "列表第二项" },
{ id: 3, name: "列表第三项" }
]
},
onTap: function (event) {
console.log(event)
console.log("子级")
},
onChildTap: function (event) {
console.log("父级")
},
onPreparentTap: function (event) {
console.log(event)
console.log("爷级")
}
})
网友评论