小程序学习笔记（４）条件判断、方法、事件

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/ahui829/article/details/102736546

小程序之条件判断、方法、事件

1.条件判断

<!-- 条件判断 -->
<view wx:if="{{flag}}">
    <text>flag为true我会显示</text>
</view>
<view wx:else>
    <text>flag为false我会显示</text>
</view>

在js的page下的data定义flag为false


2.绑定属性

<!-- 属性绑定 -->
<view data-aid="{{aid}}">绑定属性</view>

3.方法、事件

<!-- 方法 事件 -->
<view bindtap="run">点击我看看控制台</view>
<button size="mini" bindtap="getMsg">获取msg的值</button>
<button size="mini" bindtap="setMsg">改变msg的值</button>

页面加载就执行run()方法，直接调用run()方法即可

/**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {
        //页面加载就执行run()方法
        this.run()
    }

4.事件对象

<!-- 事件对象 -->
<button size="mini" data-aid="123" bindtap="eventFn">事件对象</button>

//事件对象
    eventFn(e){
        console.log(e)
        //获取自定义属性
        console.log(e.currentTarget.dataset.aid)
    },

5.视图层执行方法传值

<!-- 执行方法传值 -->
<button size="mini" data-aid="dadada" data-cid="123456" bindtap="requestData">执行方法传值</button>

6.事件冒泡

<!-- 事件冒泡 -->
<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>