小程序 wxml 语法 —— 42 条件渲染

条件渲染主要用来控制页面结构的展示和隐藏，在微信小程序中实现条件渲染有两种方式：

• 使用 wx:if、wx:elif、wx:else 属性组；
• 使用 hidden 属性；

wx:if 和 hidden 的区别：

• wx:if ：当条件为 true 时将结构展示出来，否则结构不会进行展示，通过移除/新增节点的方式来实现；
• hidden：当条件为 true 时会将结构隐藏，否则结构会展示出来，通过 display 样式属性来实现；

下面通过微信开发者工具进行演示：

wx-if 方式

• 在 pages/cate/cate.js 中添加数据声明，如下所示：

  Page({
    data: {
      num: 1
    },
    updateNum(){
      this.setData({
        num: this.data.num + 1
      })
    }
  })

• 在 pages/cate/cate.wxml 中添加页面样式代码，如下所示：

  <!-- wx:if 属性组 -->
  <!-- wx:if wx:elif wx:else -->
  <!-- 只有对应的条件成立，属性所在的组件才会进行展示 -->
  <!-- wx:else 不能单独使用，在使用的时候，必须结合 wx:if 来使用 -->
  <!-- 使用 wx:if 属性组的组件不能被打断，组件必须连贯才可以 -->
  <view wx:if="{{ num === 1 }}">num 等于 {{ num }}</view>
  <view wx:elif="{{ num === 2 }}">num 等于 {{ num }}</view>
  <view wx:else>num 大于 2，目前 num 等于 {{ num }}</view>
  
  <button type="warn" bind:tap="updateNum">更新 num</button>

  刷新页面，不断点击按钮，可以发现随着 num 的值变化，页面上的内容也在不断发生变化，如下所示：

hidden 方式

• 在 pages/cate/cate.js 中添加数据声明，如下所示：

  Page({
    data: {
      num: 1,
      isFlag: true
    },
    updateNum(){
      this.setData({
        num: this.data.num + 1
      })
    }
  })

• 在 pages/cate/cate.wxml 中添加页面样式代码，如下所示：

  <!-- hidden 属性 -->
  <!-- hidden 属性，属性值如果是 true，就会隐藏结构，如果是 false，才会展示结构-->
  
  <view hidden="{{ !isFlag }}">如果 isFlag 是 true，展示结构，否则隐藏结构</view>

  刷新页面，通过修改 isFlag 的值，可以看到页面上的内容在不断变化，如下所示：

参考视频：