小程序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中展示。

相关推荐
游戏开发爱好者89 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
_pengliang10 小时前
小程序按住说话
开发语言·javascript·小程序
万岳科技程序员小金12 小时前
多端协同的招聘系统源码开发指南:小程序+APP一体化设计
小程序·软件开发·app开发·招聘小程序·同城招聘系统源码·招聘app开发·招聘软件开发
xkxnq12 小时前
微信小程序地理定位功能
微信小程序·小程序
難釋懷13 小时前
微信小程序全局数据共享
微信小程序·小程序
阿眠15 小时前
vue3实现web端和小程序端个人签名
前端·小程序·apache
2501_9159184117 小时前
iOS 性能监控工具全解析 选择合适的调试方案提升 App 性能
android·ios·小程序·https·uni-app·iphone·webview
大锦终1 天前
【Linux】第一个小程序—进度条
linux·运维·服务器·小程序
前端呆猿1 天前
小程序性能优化全攻略:提升用户体验的关键策略
前端·性能优化·小程序
说私域1 天前
直播带货与开源AI智能名片链动2+1模式S2B2C商城小程序:重塑电商营销新格局
人工智能·小程序