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

Posted 2022-01-15 水星记_

前言

做过微信小程序的人都知道，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” 却消失了，这是因为第二种的写法会导致该对象的其他属性全部消失，所以大家在使用的时候要慎重选择，尽量使用第一种写法就好啦。