微信小程序-条件渲染

一.使用wx:if进行条件渲染

使用wx:if , wx:elif , wx:else进行条件渲染，当条件为true的时候显示，否则不显示。
注意：此时的组件显示或者不显示代表着组件的增删
需要在.js文件里面的data里面准备数据：

Page({
  data:{
    obj:{
      num:1
    }
  },
  onClick(){
    const obj = this.data.obj
    obj.num = obj.num + 1
    this.setData({
      obj:obj
    })
  }
})

在.wxml里面进行条件渲染
条件渲染的时候，不能在条件渲染组件里增加其它组件，或者不要wx:if属性。
否则都会报错

<!-- 条件渲染 必须有wx:if,且使用if elif else的时候不能插入其他的组件，增删组件-->
<view wx:if="{{obj.num===1}}">num等于:{{obj.num}}</view>
<view wx:elif="{{obj.num===2}}">num等于:{{obj.num}}</view>
<view wx:else="{{obj.num>2}}">num大于:{{obj.num}}</view>
<button type="warn" bind:tap="onClick">按钮</button>

二.hidden进行条件渲染

当条件为true时候显示组件，当条件为false时候不显示组件。
是通过display样式属性来实现的。并不会直接增加删除组件

<!-- hidden 隐藏组件-->
<view hidden="{{obj.num==5}}">{{obj.num}}</view>