小程序采坑系列-this.setData

今天踩了大坑，坑里还都是碎瓶渣子。。

1. 先说一下基本使用。官网也有。

   比如说你在main.js里面有这些变量。想修改某些值。

   data: {
   main_view_bgcolor: "",
   border: "",
   }

   修改方式有两种，一是直接用“=”赋值，这种是可以修改，并且你把修改之后的值打印出来可以看到确实修改了，但是不推荐使用这样的方式。

   因为，一般我们想修改data里面的值，往往都是因为这些数据都在main.wxml中绑定了，可以实现动态修改并实时刷新显示。刚刚这种方式容易发生数据被修改但是页面没有变化。

   所以说一下下面这种方式：

   在你绑定的自定义函数（往往都是绑定的点击事件）里面，

   this.setData({
   border:"aa"//这个border跟上面data里面的border是对应的。
   })

   这种方式，点击之后触发事件，执行函数，更新数据，同时可以实时更新渲染界面。

   2、高能高能，这个就是那个都是瓶渣子的坑（哭状）

     data: {
       main_view_bgcolor: "",
       border: "",
       isChecked: [true, true, true, true, true, true, true, true, true, true, true, true, true, true, true]
   }

   如上，如果我想动态修改isChecked里面指定某个下标的值怎么办？

   首先我先喷一句，这是百度知道网友给的回答。https://zhidao.baidu.com/question/1434931285716531579.html

   你TM就不能把代码多粘贴一点？会死啊？鬼知道你写的什么意思。

   好了（故作正经），下面我来说怎么动态修改一个对象的某元素的值。上面这个是索引下标，等会还有个key-value的例子。

   代码：

   click: function (e) {
       var id = e.target.id//根据点击不同的view获取对应的id值
       var str = "isChecked[" + id + "]"//重点在这里，组合出一个字符串
       this.setData({
         [str]: false//用中括号把str括起来即可
       })
   }

   看注释。点击->触发对应事件->来到click函数这里，根据点击的view获取对应的id，修改指定下标的isChecked。

   上面这个isChecked的索引是从0到n的，即可以通过isChecked[0]、isChecked[1]来访问。可以在操作的过程中打印日志看一下数据类型。

   哦，对了，在wxml中如果要绑定isChecked中元素的值，可以这么：

   <view class="{{isChecked[2]?'main_view':'main_view_clicked'}}" bindtap='click' bindlongpress='cancelclick' id='2' bindtap='click'></view>

   不要在意那个三目运算，反正类似于js中访问方式，也是isChecked[index]。同理，下面的key-value类型的就可以通过isChecked[index].key来绑定数据了。

   下面是key-value类型的：

   data: {
       main_view_bgcolor: "",
       border: "",
       isChecked: [
         {
           key: true
         },
         {
           key: true
         },
         {
           key: true
         }
       ]
   }

   直接写操作方式了（因为就跟上面只有一点点的区别）：

   var str = "isChecked[" + id + "].key" this.setData({ [str]: false })

   欢迎关注微信公众号“ **IT客**“ ，投稿邮箱 itkeyy@163.com