微信小程序 --- if/else条件渲染

Posted 2020-10-25 帅到要去报警

if 条件渲染：当为真的时候显示，当为假的时候隐藏；

else 条件渲染：当为真的时候隐藏，当为假的时候显示；

<view wx:if="{{true}}">{{text}}</view>
<view wx:else="{{false}}">{{text}}</view>

可以这样玩：

<button bindtap="btnclick">{{text}}</button>
<view wx:if="{{onOff}}">{{text}}</view>
<view wx:else="{{onOff}}">{{text}}</view>

page.js

//获取应用实例
const app = getApp()
Page({
  data: {
    text: "点击",
    message:"不错的孩子！",
    onOff: false
  },
  btnclick:function(){ 
      var onOff = this.data.onOff;
      this.setData({text:"hello",onOff:!onOff});
  }
})