微信小程序setData 赋值对象属性

你的名字 2023-10-02 17:46 14阅读 0赞

这几天在做页面的时候，关于setData方法产生了一点疑问，现在来总结一下。

首先说一下赋值对象属性的两种方法

1.修改data下的对象

this.setData({
    	'params.name':'李四'
    })

2.修改data下的对象数组

this.setData({
    	'example[1].text':"清零"
    })

如果要给对象数组中某一个对象的某个属性赋值，可以采用以下两种方式：

var temp1 = 'example['+order+'].state'
    var temp2 = `example[${order}].text`

> **然后通过\[temp1\]:'runnning'这样的方式来进行赋值**

下面是代码示例

wxml

<view class="container1">
        <viwe>{
       {params.name}}</viwe>
        <button type="primary" bindtap="changetext1"> 点击我改变文字</button>
    </view>
    
    <view class="container2">
        <view class="container-content" wx:for="{
       {example}}">
            <view>{
       {item.state}}
            </view>
            <view>{
       {item.text}}
            </view>
            <button type="primary" bindtap="changetext2" data-index="{
       {index}}"> 点击我改变文字</button>
        </view>
    </view>

data: {
            params: {
                name: '张三',
                age: '18',
                gender: 1
              },
              example: [{
                id: '1',
                state:"paused",
                text:"第一个"
              },
              {
                id: '2',
                state:"running",
                text:"第二个"
              }
            ]
        },
    
        changetext1:function(){
            console.log(1)
            this.setData({
                'params.name':'李四'
            })
        },
    
        changetext2:function(e){
            var order = e.target.dataset.index
            console.log(e.target.dataset.index)
            var temp1 = 'example['+order+'].state'
            var temp2 = `example[${order}].text`
            this.setData({
                [temp1]:'down',
                [temp2]:'清零'
            })
        },

效果图

original：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAR2F2aeabpg_size_19_color_FFFFFF_t_70_g_se_x_16][]

after bindtap：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAR2F2aeabpg_size_19_color_FFFFFF_t_70_g_se_x_16 1][]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAR2F2aeabpg_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/c126e5bc27854f4f90cf93c221b4fdaa.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAR2F2aeabpg==,size_19,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAR2F2aeabpg_size_19_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/5b7d73e649814b3e8f71cdce96192dae.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAR2F2aeabpg==,size_19,color_FFFFFF,t_70,g_se,x_16