小程序采坑系列-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客**“ ，投稿郵箱 [e-mail]