微信小程序开发系列（二十五）·wxml语法·条件渲染wx:if, wx:elif, wx:else 属性组以及hidden 属性的使用

目录

1.  使用 wx:if、wx:elif、wx:else 属性组   

2.  使用 hidden 属性

---

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

1.  使用 wx:if, wx:elif, wx:else 属性组

2.  使用 hidden 属性

        wx:if 和 hidden 二者的区别：

1.  wx:if：当条件为 true时将结构展示出来，否则结构不会进行展示，通过移除/新增节点 的方式来实现。

2.  hidden：当条件为 true 时会将结构隐藏，否则结构会展示出来，通过 display 样式属性 来实现的。

        找到cart.js文件，创建一个属性：

Page({ 

  data:{
    num: 1
  } 
  
})

        找到cart.wxml文件，编写代码：

<view>num 等于 {
  { num }}</view>

        添加按钮，加入事件更新num：

<button type="primary" bind:tap="updateNum">更新num</button>

        找到cart.wxml文件，定义事件：

  // 更新num
  updateNum(){
    this.setData({
      num: this.data.num + 1