前言
做过微信小程序的同学都知道，this.setData()方法可以修改或者更新data中的值 。那不知道大家有没有遇到这么一种情况，我要修改对象中某个属性的值该怎么办呢？是不是第一想到的就是这样写：
结果是在编译器中就直接报错，很显然，肯定是不能这样写的，那如果我就是想要修改对象中某个属性的值呢？
• 在其外面套一层数组
['对象.属性']: 修改的值
.wxml
<view><view class="tabsBox"><text>性别：</text><text>{{objs.sex}}</text></view><view class="tabsBox"><text>年龄：</text><text>{{objs.age}}</text></view><button bindtap="btnClick">点击修改</button></view>
.js
const app = getApp()Page({data: {// 默认的数据objs: {sex: "女",age: "18",},},// 点击事件btnClick() {this.setData({['objs.sex']: "男",['objs.age']: "20",})},})
• 放在对象中
对象: {属性: '值'}
.wxml
<view><view class="tabsBox"><text>性别：</text><text>{{objs.sex}}</text></view><view class="tabsBox"><text>年龄：</text><text>{{objs.age}}</text></view><button bindtap="btnClick">点击修改</button></view>
.js
const app = getApp()Page({data: {// 默认的数据objs: {sex: "女",age: "18",},},// 点击事件btnClick() {this.setData({objs: {sex: "男",},})},})
可以看到一个很明显的问题，我明明只修改了性别字段的值，但是默认存在的年龄字段的值却消失了，因为这种写法会导致该对象的其他属性全部消失，所以要慎重选择，尽量使用第一种写法就好啦。
.wxss文件
.tabsBox {margin: 0rpx 10rpx;padding: 20rpx 0rpx;font-size: 30rpx;border-bottom: 1px solid gainsboro;}
- 拓展延伸
修改数组中某个对象的属性值
.wxml
<view><view wx:for="{{imgData}}" wx:key="index"><view>{{item.imgTit}}</view><view><image src="{{item.imgUrl}}"></image></view></view><button bindtap="btnClick">点击修改</button></view>
.js
const app = getApp()Page({data: {// 默认的数据imgData: [{imgTit: "风景图1",imgUrl: "/it/u=530426417,2082848644&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1656522000&t=0050fe01b5db9476166821b30d44655c",}, {imgTit: "风景图2",imgUrl: "/it/u=700675537,3936578503&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1656522000&t=54182c0a2d3f1d8d22d9c24e8556a12e",}],},// 点击事件btnClick() {//数组动态赋值const imgOne = "imgData[0].imgUrl";const imgTwo = "imgData[1].imgUrl";this.setData({[imgOne]: "/it/u=3643895624,2552772604&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675",[imgTwo]: "/it/u=63249423,2260265143&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",})},})
如下：
