微信小程序this.setData修改对象中某个属性的值

前言

做过微信小程序的人都知道，this.setData()方法是用于将逻辑层的数据发送到视图层，同时改变对应的this.data的值，简单来说就是通过this.setData()方法去修改或者更新data中的值。那不知道大家有没有遇到这么一种情况，我要修改对象中某个属性的值该怎么办呢？是不是第一想到的就是这样写：

结果是在编译器中就直接报错，很显然，肯定是不能这样写的，那如果我就是想要修改对象中某个属性的值呢，别担心，下面两种写法就可以完全满足你的要求。

第一种：通过放在数组中的方式 ['对象.属性']: 值

小案例

.wxml

<view>
    <!-- // gather.defChange相当于拿到data中gather对象中defChange的值 -->
    <view>{{gather.defChange}}</view>
    <!-- // bindtap 点击事件 -->
    <button bindtap="btnClick">点击修改</button>
</view>

.js

Page({
    data: {
        gather: {
            defChange: "默认值---60",
        },
    },
    btnClick: function () {
        this.setData({
            ['gather.defChange']: "修改后的值---100"
        })
    },
})

第二种：通过放在对象中的方式 对象: {属性: '值'}

小案例

.wxml

<view>
    <view>{{gather.typical}}</view>
    <view>{{gather.defChange}}</view>
    <button bindtap="btnClick">点击修改</button>
</view>

.js

Page({
    data: {
        gather: {
            typical: "默认值---0",
            defChange: "默认值---60",
        },
    },
    btnClick: function () {
        this.setData({
            gather: {
                defChange: "修改后的值---100"
            }
        })
    },
})

可以看到一个很明显的问题，页面开始明明有一个 “默认值---0” ，但是当我点击修改后，我想要修改的值改变了，但是页面开始就存在的 “默认值---0” 却消失了，这是因为第二种的写法会导致该对象的其他属性全部消失，所以大家在使用的时候要慎重选择，尽量使用第一种写法就好啦。