微信小程序开发系列（十九）·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
  },

  // 更新 num
  updateNum(){

  // 获取数据
  console.log(this.data.num)
  }
}) 

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

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

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

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

完整代码：

Page({

  data:{
    num: 1
  },

  // 更新 num
  updateNum(){

  // 获取数据
  // console.log(this.data.num)

  // 通过赋值的方式直接修改数据
  this.data.num += 1
  console.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
  },

  // 更新 num
  updateNum(){

  // 获取数据
  // 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()方法可以实现以下操作：

1. 更新对象的特定属性： 可以通过指定对象属性的路径来更新对象中的特定属性。例如，使用this.setData({'person.name':'Bob'}) 可以更新对象中的name属性为'Bob'。

2. 替换整个对象： 除了更新单个属性外，也可以通过直接替换整个对象来更新对象数据。例如，使用 this.setData({person:{ name : 'Charlie', age: 35, gender: 'male'}})可以替换整个person对象。

3. 触发视图更新： 调用setData()方法后，会自动触发页面视图的更新，确保页面上展示的数据与最新的对象数据保持同步。

微信小程序开发_时光の尘的博客-CSDN博客