由于VUE等框架,我们在逻辑层修改data中的数据后,视图层(页面渲染)会跟着发生变化。当然微信小程序也是实现了相同的功能,那么出现错误的原因是什么?答案:微信小程序的setData()方法。
Page({
data: {
isShow: false
},
changeStatus(){
console.log(this.data.isShow);
this.data.isShow = true;
console.log(this.data.isShow);
}
})
从上边代码和效果图我们可以看出:1、习惯的赋值方式“=”在逻辑层是起到了作用改变了isShow;2、视图层的并没有发生变化。 结论就是常规的“=”赋值方式,在微信小程序中只能改变data中的数据,而不能改变视图层的数据,那么微信小程序怎么解决这个问题的,setData()方法。
setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。
Page({
data: {
isShow: false,
isShow1: false
},
changeStatus(){
console.log(this.data.isShow);
this.data.isShow = true;
console.log(this.data.isShow);
},
changeStatus1() {
console.log(this.data.isShow);
this.setData({ isShow:true});
console.log(this.data.isShow);
}
})