评论

微信小程序this.setData如何修改对象、数组中的值

微信小程序云开发教程

 在微信小程序的前端开发中,使用this.setData方法修改data中的值,其格式为


this.setData({
   '参数名1': 值1,
   '参数名2': 值2
)}

    需要注意的是,如果是简单变量,这里的参数名可以不加引号。

    经过测试,可以使用3种方式对data中的对象、数组中的数据进行修改。


假设原数据为:



data: {
    user_info:{
      name: 'li',
      age: 10
    },
    cars:['nio''bmw''wolks']
},

   

 方式一:

     使用['字符串'],例如


this.setData({
      ['user_info.age']: 20,
      ['cars[0]']: 'tesla'
})

方式二:

    构造变量,重新赋值,例如


    var temp = this.data.user_info
    temp.age = 30
    
    this.setData({
      user_info: temp
    })

    var temp = this.data.cars
    temp[0] = 'volvo'
    
    this.setData({
      cars: temp
    })


方式三:

     直接使用字符串,此种方式之前不可以,现在可以了,估计小程序库升级了。

    注意和第一种方法的对比,推荐还是使用第一种方法。


this.setData({
      'user_info.age'40,
      'cars[0]''ford'
})


完整代码:


Page({

  /**
   * 页面的初始数据
   */
  data: {

    user_info:{
      name: 'li',
      age: 10
    },

    cars:['nio', 'bmw', 'wolks']

  },

  change_data: function(){

    console.log('对象-修改前:'this.data.user_info)
    
    this.setData({
      ['user_info.age']: 20
    })
    console.log('对象-修改后1:', this.data.user_info)


    var temp = this.data.user_info
    temp.age = 30
    this.setData({
      user_info: temp
    })
    console.log('对象-修改后2:', this.data.user_info)


    this.setData({
      'user_info.age': 40
    })
    console.log('对象-修改后3:', this.data.user_info)



    console.log('数组-修改前:'this.data.cars)
    
    this.setData({
      ['cars[0]']: 'tesla'
    })
    console.log('数组-修改后1:', this.data.cars)

    var temp = this.data.cars
    temp[0] = 'volvo'
    this.setData({
      cars: temp
    })
    console.log('数组-修改后2:', this.data.cars)

    this.setData({
      'cars[0]': 'ford'
    })
    console.log('数组-修改后3:', this.data.cars)

  }
})


效果:


点赞 17
收藏
评论

6 个评论

  • 阿峰Sammy
    阿峰Sammy
    2023-01-04

    第二种方法temp并不没有复制值,还是修改的原对象

    2023-01-04
    赞同 2
    回复
  • Asace
    Asace
    2023-06-29

    非常棒的文章 解决了单个添加商品数量的问题

    2023-06-29
    赞同
    回复
  • myccmj(cmj)
    myccmj(cmj)
    2022-09-24
    第一种方式好像在index是参数的时候会不行,比如我前面let i=2,然后写'cars[i]''ford'会报错。我看官方小程序例子中的做法似乎是直接对this.data.*进行修改,然后再setdata({*=this.data.*})
    


    2022-09-24
    赞同
    回复 1
    • A  ^﹏^
      A ^﹏^
      2023-01-11
      如果是参数,可以这么写:
      this.setData({
            [`cars[${index}]`]: 'tesla'
      })
      2023-01-11
      2
      回复
  • 嚤憕兎兎
    嚤憕兎兎
    2022-07-22

    我想知道删除列表的数据后,再加载分页怎么搞,有个bug,会少一条数据。

    2022-07-22
    赞同
    回复
  • WGH
    WGH
    2022-04-19

    学到了,学到了,非常感谢!


    2022-04-19
    赞同
    回复
  • 图酷家
    图酷家
    2022-04-07

    太棒了哈哈

    2022-04-07
    赞同
    回复
登录 后发表内容