微信小程序开发系列（十九）·wxml语法·setData（）修改数据

步骤一：创建一个data对象

步骤二：双大括号写法的使用

步骤三：创建一个更新事件按钮

步骤四：定义事件处理函数·获取数据

步骤五：定义事件处理函数·修改数据

方法一：通过赋值的方式直接修改数据

方法二：通过setData()方法

总结

小程序中修改数据不推荐通过赋值的方式进行修改，通过赋值的方式修改数据无法改变页面的数据，而是要通过调用setData()方法进行修改，setData()方法接收对象作为参数，key是需要修改的数据，value是最新的值。

setData（）方法有两个作用：

1. 更新数据

2. 驱动视图更新

步骤一：创建一个data对象

找到index.js文件，将page内的代码删除，创建一个 data 对象：


Page({data:{num: 1}
})

步骤二：双大括号写法的使用

找到index.wxml文件，将其内容删除，编写代码：

<view>{{ num }}</view>

步骤三：创建一个更新事件按钮

在index.wxml创建一个更新事件：

<button bind:tap="updateNum">更新 num</button>

步骤四：定义事件处理函数·获取数据

可以通过this获取数据：


Page({data:{num: 1},// 更新 numupdateNum(){// 获取数据console.log(this.data.num)}
})

步骤五：定义事件处理函数·修改数据

方法一：通过赋值的方式直接修改数据

  // 通过赋值的方式直接修改数据this.data.num += 1console.log(this.data.num)

可以看出这种方法能够修改数据，但是不能改变页面上的数据：

完整代码：


Page({data:{num: 1},// 更新 numupdateNum(){// 获取数据// console.log(this.data.num)// 通过赋值的方式直接修改数据this.data.num += 1console.log(this.data.num)//能够修改数据，但是不能改变页面上的数据}
})

方法二：通过setData()方法

通过调用setData()方法进行修改，setData()方法接收对象作为参数，key是需要修改的数据，value是最新的值。

  this.setData({// key：是需要更新的数据// value：是最新的值num: this.data.num + 1})console.log(this.data.num)

可以发现此时既能够修改数据，也能改变页面上的数据：

此时代码：


Page({data:{num: 1},// 更新 numupdateNum(){// 获取数据// console.log(this.data.num)// 通过赋值的方式直接修改数据// this.data.num += 1// console.log(this.data.num)//能够修改数据，但是不能改变页面上的数据// setData（）方法有两个作用：// 1.  更新数据// 2.  驱动视图更新this.setData({// key：是需要更新的数据// value：是最新的值num: this.data.num + 1   })console.log(this.data.num)}
})

总结

微信小程序中的setData()方法用于修改页面数据并实时更新视图，是实现动态数据绑定的重要方法之一。当数据发生变化时，可以通过调用setData()方法来更新页面上相应的数据，并自动触发视图的更新，以确保用户界面与最新的数据保持同步。

使用setData()方法需要传入一个对象，该对象包含需要更新的数据字段及其对应的数值。当调用setData()方法后，页面上绑定了被修改数据的部分将会自动更新，反映最新的数据状态。

在微信小程序中，使用setData()方法修改对象数据类型是一种常见的操作，可以实现动态更新页面上展示的对象数据。当页面需要展示对象类型的数据，并且该对象的属性值可能会发生变化时，就可以通过setData()方法来更新对象数据。

具体而言，通过setData()方法可以实现以下操作：

更新对象的特定属性： 可以通过指定对象属性的路径来更新对象中的特定属性。例如，使用this.setData({'person.name':'Bob'}) 可以更新对象中的name属性为'Bob'。
替换整个对象： 除了更新单个属性外，也可以通过直接替换整个对象来更新对象数据。例如，使用 this.setData({person:{ name : 'Charlie', age: 35, gender: 'male'}})可以替换整个person对象。
触发视图更新： 调用setData()方法后，会自动触发页面视图的更新，确保页面上展示的数据与最新的对象数据保持同步。