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