小程序 wxml 语法 —— 36 wxml 语法 - setData() 修改数据

在小程序中修改数据不推荐通过赋值的方式进行修改，通过赋值的方式修改数据无法改变页面的数据；

在微信小程序中，推荐调用 setData() 方式进行修改，setData() 方法接收对象作为参数，key 是需要修改的数据，value 是最新的值；

setData() 方法有两个作用：

• 更新数据
• 驱动视图更新；

下面打开微信开发者工具，演示一下如何通过 setData 进行数据修改：

• 在 pages/cate/cate.js 中进行数据声明，如下：

  Page({
    // 在小程序页面中所需要使用的数据均来自 data 对象
    data:{
      num: 1
    },
  
    updateNum() {
      // 获取 num
      // console.log(this.data.num);
  
      // 通过赋值的方式直接修改数据 num
      this.data.num += 1;
      console.log(this.data.num);
    }
  })

• 在 page/cate/cate.wxml 中添加如下代码：

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

  刷新页面，点击按钮，可以发现 console 打印的 num 值在不断增大，但是页面中的 num 没有发生变化，如下：

通过上面的演示可以知道，通过赋值可以修改数据，但是不能改变页面上已经显示的数据；如果我们想更新 data 中的数据，同时也更新页面上已经显示的数据，就得使用 setData() ；

修改一下 pages/cate/cate.js 中的代码，如下：

Page({
  // 在小程序页面中所需要使用的数据均来自 data 对象
  data:{
    num: 1
  },

  updateNum() {    
    this.setData({
      // key: 需要更新的数据的名称
      // value: 需要更新的数据的值
      num: this.data.num + 1
    })
  }
})

修改代码后，刷新页面，点击按钮，可以发现页面上的 num 值实时更新了，如下图所示：

参考视频：