美文网首页
数据与事件绑定

数据与事件绑定

作者: 九尾的日志 | 来源:发表于2018-08-23 14:37 被阅读0次
    • 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("爷级")
        }
    })
    

    相关文章

      网友评论

          本文标题:数据与事件绑定

          本文链接:https://www.haomeiwen.com/subject/qmzpiftx.html