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

在微信小程序的前端开发中,使用this.setData方法修改data中的值,其格式为
this.setData({ '参数名1': 值1,'参数名2': 值2)}

注意:如果是简单变量,参数名可以不加引号。

下面提供2种方式对data中的对象、数组中的数据进行修改:

假设原数据为:

javascript 复制代码
data: {
    userInfo: {
      username: 'little',
      sex: 'female'
    },
    arr: [1,2,3,4,5,6],
},

方式一:使用['字符串']

javascript 复制代码
this.setData({
  // 写法一:
  ['userInfo.username']: 'plum',
  ['arr[2]']: 10
 // 写法二:
 'userInfo.username': 'plum',
 'arr[2]': 10,
})

当字符串中含有变量时,使用arr[${index}],并且外层的[]不可省略

this.setData({ [cars[${index}]]: 20})

方式二: 构造变量,重新赋值

javascript 复制代码
  var temp = this.data.userInfo
  temp.username = 'plum'
  this.setData({userInfo: temp})

  var temp = this.data.arr
  temp[2] = 10
  this.setData({arr: temp})

另需注意:数组不可直接在xml中使用,要么遍历要么转为字符串后在xml中展示。

相关推荐
Jing_jing_X1 小时前
微信小程序开发踩坑记:从AI工具翻车到找到合适方案
人工智能·ai·小程序·产品运营·个人开发
一匹电信狗2 小时前
【MySQL】数据库的相关操作
linux·运维·服务器·数据库·mysql·ubuntu·小程序
weixin_lynhgworld7 小时前
旧物新生,从二手回收小程序开启绿色生活
小程序·生活·旧物回收
從南走到北8 小时前
智尚招聘求职小程序v1.0.23
微信小程序·小程序
2501_9159184112 小时前
掌握 iOS 26 App 运行状况,多工具协作下的监控策略
android·ios·小程序·https·uni-app·iphone·webview
知识分享小能手13 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
2501_9159090615 小时前
iOS 混淆实战,多工具组合完成 IPA 混淆与加固(源码 + 成品 + 运维一体化方案)
android·运维·ios·小程序·uni-app·iphone·webview
狂团商城小师妹15 小时前
智尚房产中介小程序
微信小程序·小程序
狂团商城小师妹19 小时前
预约洗车小程序
微信小程序·小程序
future_studio19 小时前
聊聊 Unity(小白专享、C# 小程序 之 图片播放器)
unity·小程序·c#