微信小程序如何使用setData修改data中子对象的属性值 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

微信小程序如何使用setData修改data中子对象的属性值

发表时间:2021-1-5

发布人:葵宇科技

浏览次数:48

在微信小程序开发中数据与页面的绑定是靠data对象来实现的。如果要修改页面中某个变量的值,就需要使用this.setData({变量名:值})。

比如,点击按钮修改变量值:

change:function(e){
  this.setData({
    test:'hello world!'
  })
}

但是如果要修改data中子对象的属性值呢?一个很自然的想法是多点几次不就行了?比如person.name

 this.setData({
    person.name:'fxjzzyo'
  })

但是,很遗憾不能这样做啦!!QAQ,上面是错误示范啦!!!
会报错啊=_=QAQ

难道为了更改其中一个属性,就只能把一个对象的所有属性都setData一遍吗?

呵呵,当然不是啦。山人自有妙计也。
只需要用一个字符串拼接处前面的属性名就ok啦~
且看下面的栗子~


例如:

页面代码test.wxml:

<view class='page'>
  <view>{{test}}view>
  <button bindtap='change'>修改test为hello world!button>
    <view>{{person.name}}view>
  <button bindtap='changePerson'>修改人名为fxjzzyobutton>
view>

逻辑代码test.js:


Page({

  /**
   * 页面的初始数据
   */
  data: {
     test:'test',
     person:{
      name:'jay',
      age:12,
      address:'china',
      like:'sing song',
      phone:'123456'
    }
  },
  change:function(e){
  this.setData({
    test:'hello world!'
  })
},
  changePerson:function(e){
    var str = 'person.name';
    this.setData({
      [str]: 'fxjzzyo'
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  }
})

重点在changePerson这个方法中:

 changePerson:function(e){
    var str = 'person.name';
    this.setData({
      [str]: 'fxjzzyo'
    })
  },

很easy啦,只需要把原本要写的person.name:’fxjzzyo’前面的person.name用一个字符串变量拼接出来就ok啦~
切记:使用时要把那个变量用中括号([])括起来


虽然是小知识点,但用处肯定大大地。。假如不会这个的话,就无法修改子对象的属性值,最笨的方法是,把这个对象重新赋值一遍。对象属性个数少了还好说,要是碰到一个对象的属性超级多,而你只是为了修改其中一个属性就把所有值赋值一遍

相关案例查看更多