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

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

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

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

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

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

且看下面的栗子~
例如:
页面代码test.wxml:


  {{test}}
  
    {{person.name}}
  

第一种写法

逻辑代码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'
    })
  },

第二种写法

除了上面这种写法还可以这样写代码如下:

changePerson:function(e){
    this.setData({
      'person.name': 'fxjzzyo'
    })
  },

你可能感兴趣的:(微信小程序如何使用setData修改data中子对象的属性值)