微信小程序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)
  }})

效果：

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

微信小程序使用setData方法修改data中对象或数组的属性值
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站微信小程序使用setData方法修改data中对象或数组的属性值使用微信小程序开发时,涉及到data ...
微信小程序修改数组中的元素_微信小程序——this.setData()动态修改数组中的某一值...
微信小程序--this.setData()动态修改数组中的某一值S8v编程技术_踩坑日志_进阶指南_无知人生大家是不是都觉得微信小程序的开发方式和 vue react 这种框架的开发方式很像?S8v ...
微信小程序：setData 数据传输长度为 1678 KB，存在有性能问题！
微信小程序:setData 数据传输长度为 1678 KB,存在有性能问题! 记录遇到的问题本文也参考了其他文章由于data 数据过大,比如 base64 / 数据列表返回内容过大,导致无法执行 ...
微信小程序向java后端发送对象时，后端接收不到
微信小程序前端向后端发送对象接收不到这里时请求头这里时data中做的假数据这是封装好的 post请求后端的Controller代码返回的结果接收结果为null 但是可以接到可以用过加@ ...
html5 setdata函数,微信小程序this.setData is not a function错误解决
开发中遇到微信小程序"this.setData is not a function"错误,具体错误内容如下所示: VM10092:1 thirdScriptError this.s ...
微信小程序手把手教你实现类似Android中ViewPager控件效果
微信小程序手把手教你实现类似Android中ViewPager控件效果前言需求分析头部TAB 滑动的内容部分最终版本尾巴前言在做Android开发的时候,ViewPager是开发者使用频 ...
微信小程序--在app.js 和其他页面中更改globalData的值
微信小程序--在app.js 和其他页面中更改globalData的值 app.js中修改其他页面 app.js中修改在app.js中,应当在小程序初始化完成以后再更改全局变量的值,即在onLau ...
微信小程序 #开发者工具无法在资源管理器中 #右键 #新建page 的问题。
微信小程序 #开发者工具无法在资源管理器中 #右键 #新建page 的问题. 初学者怎么解决呢,建议尝试在设置(setting)_通用设置 _中更改语言,一般有"系统语言". ...
微信小程序this.setData修改对象中某个属性的值
前言做过微信小程序的同学都知道,this.setData() 方法可以修改或者更新 data 中的值 .那不知道大家有没有遇到这么一种情况,我要修改对象中某个属性的值该怎么办呢?是不是第一想到的就是 ...
微信小程序：setData函数详解及注意事项
在微信小程序中经常会使用到setData函数把变量渲染到视图层,那么什么是setData呢?如何使用?注意事项有些什么?下面我们就来详细了解一下! 正文 setData是小程序开发中使用最频繁的接口, ...

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

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

最新文章

热门文章