以下省略了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模板字符串‘字符串’和${} 表示法 |