微信小程序条件渲染

微信小程序条件渲染

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-