解决如下场景我们使用动态赋值语法[`${}`]
场景一
假设我们有这样一个对象（代码块1），我们要想修改show.bottom为true，利用this.setData({})该如何修改呢,起初我们想到的应该是这样this.setData({show:{...this.data,buttom: true}})，这种尚且还能解决，那么请看场景二如何解决呢?
//代码块1
Page({
data: {
show: {
top: false,
bottom: false,
left: false
}
}
}）
场景二
假设如下(代码块2)有数组videoList，里面有很多个对象，我们要修改某个对象中的那个show，现在通过方法bindplay(e)中的事件源对象拿到对象所在的数组中的下标，那么如何去修改?
首先看看代码块3的方法，也是我们最容易想到的办法，显然下面起了波浪符号，语法报错并不支持我们这样修改。
那么有什么办法可以支持我们修改这种数据的结构呢，官网给我们提供了一种办法，叫动态赋值法，详细语法见代码块4，它允许我们通过[]嵌套字符串去访问深层次结构的数据，这种叫做动态赋值，以此我们就达到了我们的目标了。
那么场景一的动态赋值该怎么写呢，请见代码块5
//代码块2
Component({
videoList: [{
uid: 1,
title: "黄瓜技术培训视频",
cover: "https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1994212087.png",
resource: "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=302802010104213",
show: true,
company: "寿光汇坤商贸有限公司",
time: "0000-00-00"
}，
{...},
...
]
})
image.png
image.png
//代码块5
method:{
toggle(type, show) {
this.setData({
[`show.${type}`]: show
});
},
showBottom() {
this.toggle('bottom', true);
},
}
使用语法案例：
eg1(vant-weapp源码radio部分):
<!-- wxml中 -->
<van-radio-group
value="{{ radio1 }}"
data-key="radio1"
bind:change="onChange"
>
<van-radio name="1" custom-class="demo-radio">单选框 1</van-radio>
<van-radio name="2">单选框 2</van-radio>
</van-radio-group>
<!-- js中 -->
onChange(event) {
const { key } = event.currentTarget.dataset;
this.setData({ [key]: event.detail });
},
