微信小程序之wx:if视图层的条件渲染


示例:

wxml:使用view

<!--index.wxml-->

<button bindtap="EventHandle">按钮</button>

<!-- wx:if -->

<view wx:if="{{boolean==true}}">

    <view class="bg_black"></view>

</view>

<view wx:elif="{{boolean==false}}">

    <view class="bg_red"></view>

</view>

 

wxss:

/**index.wxss**/

.bg_black {

  height: 200rpx;

  background: lightskyblue;

}

.bg_red {

  height: 200rpx;

  background: lightpink;

}

 

js:

// index.js

Page({

  data: {

    boolean:false

  },

  EventHandle: function(){

    var bol = this.data.boolean;

    this.setData({

      boolean: !bol

    })

  }

})

 

续上:

把上面标注绿色部分的view改成block

wxml:使用block

<!--index.wxml-->

<button bindtap="EventHandle">按钮</button>

<!-- wx:if -->

<block wx:if="{{boolean==true}}">

    <view class="bg_black"></view>

</block>

<block wx:elif="{{boolean==false}}">

    <view class="bg_red"></view>

</block>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM