小程序系列2-setData修改数据

小程序系列2-setData修改数据

个人学习和记录使用，如有错误欢迎指正。

一、双向绑定 model:value

小程序数据是单向绑定的，在input标签中，利用model:value可以是实现双向绑定。

<input type="text" model:value="{{inputValue}}"/>
Page({
	data:{
		inputValue:'input的值'
	}
})

在页面input中改变input值，data里的inputValue的值也会发生变化，进而实现数据的双向绑定。
注意：{{inputValue}}只能是变量名，不能是字符串+变量名，不能是对象.key的值

二、单向绑定 setData改变数据的值

setData()是个函数，接受一个对象，对象是key:value的格式。
key是data里的key，value是要赋值的值。
基本逻辑就是定义一个新赋值的变量，在setData函数中，新变量就是对应的value。

1.改变数组

代码如下（示例）：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:['1','2','3' ],
  },
  changeData() {
    this.list.push('6') // 方法一
    let newList = [...this.data.list, 6] // 方法二
    let newList = this.data.list.concat('6') // 方法三
    this.setData({
    	list: this.list // 对应方法一
    	list: newList // 对应方法二/三
   })
 }
})

2.改变对象

代码如下（示例）：

Page({

  /**
   * 页面的初始数据
   */
  data: {
     obj:{
      a: 'shijie'
    }
  },
  changeData() {
 	// 方式一
    this.setData({
     "obj.a":'世界'
    })
    // 方式二
    let newObj = {
      ...this.data.list,
      a:'世界'
    }
    // 方式三
    let newObj = Object.assign(this.data.obj,{a:'世界'})
    this.setData({
      obj:newObj
    })
 }
})