微信小程序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