微信小程序之wx:if视图层的条件渲染：微信小程序教程系列10

桃扇骨 2021-12-05 02:57 453阅读 0赞

![20170213150337918][]

使用wx:if进行视图层的条件渲染

示例：
    
    wxml：使用view
    
    
    
    <button bindtap="EventHandle">按钮</button>
    
    
    
    <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
    
        })
    
      }
    
    })

**运行：**

![Center][]

**续上：**

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

**wxml：使用block**

<button bindtap="EventHandle">按钮</button>
    
    
    
    <block wx:if="{
       {boolean==true}}">
    
        <view class="bg_black"></view>
    
    </block>
    
    <block wx:elif="{
       {boolean==false}}">
    
        <view class="bg_red"></view>
    
    </block>

**运行：**

![Center][]

**续上：**

增加一个wx:for做列表渲染

wxml：
    
    
    
    <button bindtap="EventHandle">按钮</button>
    
    
    
    <block wx:if="{
       {boolean==true}}" wx:for="{
       {arr}}">
    
        <view class="bg_black">内容：{
       {item}}</view>
    
    </block>
    
    <block wx:elif="{
       {boolean==false}}">
    
        <view class="bg_red">无内容</view>
    
    </block>
    
     
    
    index.js：
    
    // index.js
    
    Page({
    
      data: {
    
        boolean:false,
    
        arr: [1,2,3]
    
      },
    
      EventHandle: function(){
    
        var bol = this.data.boolean;
    
        this.setData({
    
          boolean: !bol
    
        })
    
      }
    
    })

**运行：**

编辑错误。

![Center 1][]

**原因是wx:if不能与wx:for共用在一个组件上！**

**续上：**

wx:if和wx:for必须分开使用

wxml：
    
    
    
    <button bindtap="EventHandle">按钮</button>
    
    
    
    <block wx:if="{
       {boolean==true}}">
    
        <block wx:for="{
       {arr}}">
    
            <view class="bg_black">内容：{
       {item}}</view>
    
        </block>
    
    </block>
    
    <block wx:elif="{
       {boolean==false}}">
    
        <view class="bg_red">无内容</view>
    
    </block>
    
     
    
    wxss：
    
    /**index.wxss**/
    
    .bg_black {
    
      height: 200rpx;
    
      background: lightskyblue;
    
    }
    
    .bg_red {
    
      height: 200rpx;
    
      background: lightpink;
    
    }
    
     
    
    index.js：
    
    // index.js
    
    Page({
    
      data: {
    
        boolean:false,
    
        arr: [1,2,3]
    
      },
    
      EventHandle: function(){
    
        var bol = this.data.boolean;
    
        this.setData({
    
          boolean: !bol
    
        })
    
      }
    
    })

**运行：**

![Center 2][]

[20170213150337918]: /images/20211205/202db7be9562425f9e784e3eef0403b1.png
[Center]: /images/20211205/ca0eb7b695584ca792bf8351af30bc8e.png
[Center 1]: /images/20211205/de1a326d5474417399b870735cf18c46.png
[Center 2]: /images/20211205/8c1bd5b635e44981807be2f811808029.png