微信小程序之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>

 

转载于:https://www.cnblogs.com/asdf-0310/p/8074030.html