【微信小程序 】 数据更新，视图无法更新时，使用setData()更新视图，并解决setData()赋值对象属性及数组问题

在Vue中，当我们对数据进行修改时，视图也会发生变化，微信小程序也提供的一样的功能，但是需要使用官方提供的setData()方法,如下:

Page({
  data: {
    isShow: false
  },
  changeStatus(){
    this.setData({isShow : true});
    console.log(this.data.isShow);
  }
})

上面的例子中isShow是直接作为子属性挂载到data上的,当我们在isShow 的上一级再加一个对象时，该如何修改数据呢，这样：

Page({
  data: {
    obj:{
	    isShow: false
    }
  },
  changeStatus(){
    this.setData({['obj.isShow']: true});      //写成this.setData({obj.isShow: true})会报错
    console.log(this.data.isShow);
  }
})

当我们要修改的类型是一个list时:

Page({
  data: {
    array: [{isShow:false},{isShow:false},{isShow:false}],
  },
  changeStatus: function() {
	var param = {};
	var str = "array["+index+"].isShow";     //index为下标
	param[str] = true;
	that.setData(param);
  }
})

如果觉得我的文章对你有帮助,欢迎关注我的blog

相关知识点

【Javascript】深入理解async/await的实现,Generator+Promise = Async/Await
【Javascript】深入理解this作用域问题以及new运算符对this作用域的影响
【Javascript】手写运算符new创建实例并实现js继承