解决如下场景我们使用动态赋值语法[`${}`]
场景一

假设我们有这样一个对象（代码块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 });
},