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

相关推荐
mg6686 分钟前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
The_era_achievs_hero5 小时前
微信小程序41~50
微信小程序·小程序
走,带你去玩13 小时前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
CC同学呀1 天前
从0到100:单位订餐统计小程序开发日记2025
小程序
666HZ6661 天前
微信小程序中scss、ts、wxml
微信小程序·小程序·scss
二十十十十十1 天前
微信点餐小程序—美食物
微信·小程序
向明天乄1 天前
在小程序中实现实时聊天:WebSocket最佳实践
websocket·网络协议·小程序
h185385922441 天前
租车小程序电动车租赁小程序php方案
小程序
海的诗篇_1 天前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html