微信小程序data key的名稱是變量時候[key]


微信小程序setData中鍵名key中使用變量

以下省略了js中page({data:{屬性省略了}})的數據。

1,當頁面綁定值是根據變量值確定時候,如何更新數據:

 <van-field value="{{ weight }}" clearable label="體重(kg)" placeholder="請輸入體重" 
type="number" bind:change="changeField" data-key="weight"/>

// js
 changeField(e){
    let key = e.currentTarget.dataset.key //得到字符串'weight'
    this.setData({
      key: e.detail
    })
  }
如果想給weight 賦值 這種寫法是只會給屬性名為key的賦值

需要改寫:通過增加中闊號的方法,[key]

changeField(e){
    let key = e.currentTarget.dataset.key
    this.setData({
      [key]: e.detail
    })
  }

理解成data[key]的縮寫,[key]其中key是data對象的一個屬性

 實際是:es6新特性

var data = {}
data[key] = value // key 可以是任何字符串
this.setData(data)

上面縮寫,es6特性:
 this.setData({
            [key]: value
        })

key的值是一個字符串,也就是對象中的屬性名稱
1,setData()表示給data對象的屬性賦值
2, [key]: value表示:
 [key]表示:對象中有個占位符key,key的值是對象屬性


與js解構對象賦值區分:解構左右兩邊都是對象或者數組

新特性:
ES6 允許聲明在對象字面量時使用簡寫語法,
來初始化屬性變量和函數的定義方法,
並且允許在對象屬性中進行計算操作:

補充:類似中括號中不用數字用字符串 <表示:從對象中選擇屬性(字符串是屬性名稱)>

2,給數組某個元素賦值:

data: {
    types: ["default", "default", "default"],
}

。。。
 var i=e.currentTarget.dataset.id
      var type="types["+i+"]"
      this.setData({
        [type]: this.data.types[i]=="default"? "primary" : "default"
      })

3,還有如下寫法:

【微信小程序+ES6新特性應用】字符串模板:美元符號$+大括號{}變量的寫法

const {
        field
      } = e.currentTarget.dataset
      this.setData({
        [`formData.${field}`]: e.detail.value
      })

在單引號中模板字符串拼接:${filed}獲取filed值,然后formData. 拼接

formData又是data的一個屬性,${field}是formData的一個屬性,

補充:ES5模板字符串‘字符串’和${} 表示法

 

 
 
 
 

 

 

標題 發布狀態 評論數 閱讀數 操作 操作
ES5模板字符串‘字符串’和${} 表示法


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM