微信小程序条件渲染

微信小程序条件渲染

---

01简单的条件渲染

代码：

// pages/test/test.js
Page({
  data: {
    id:1,
    bol:true
  },
  //事件处理函数
  bindtoLog:function(){
    wx.switchTab({
      url: '../logs/logs',
    })
  },
  bindtoIndex:function(){
    wx.switchTab({
      url: '../index/index',
    })
  },
  show:function(){
    this.setData({
      bol:!this.data.bol
    })
  }
})

// pages/test/test.js
Page({
  data: {
    id:2,
    bol:true
  },
  //事件处理函数
  bindtoLog:function(){
    wx.switchTab({
      url: '../logs/logs',
    })
  },
  bindtoIndex:function(){
    wx.switchTab({
      url: '../index/index',
    })
  },
  show:function(){
    this.setData({
      bol:!this.data.bol
    })
  }
})

运行结果：
id不为1时：这里将id的值改为2

id为1时：

02复杂的条件渲染

运行结果：
这里将id的值该为3

03条件渲染实现显示隐藏功能

点击前：

点击后：

心得：
- 在框架中，使用 wx:if=”{{condition}}” 来判断是否需要渲染该代码块。
- 使用setData()来设置属性的值
- 使用this.data.bol来访问属性

---

-END-