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

然后就去远行吧2025-03-10 19:48

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

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

setData() 方法有两个作用：

更新数据
驱动视图更新；

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

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

javascript 复制代码

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 中添加如下代码：
html 复制代码
```
<view>{{ num }}</view>

<button bind:tap="updateNum">更新 num</button>
```
刷新页面，点击按钮，可以发现 console 打印的 num 值在不断增大，但是页面中的 num 没有发生变化，如下：

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

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

javascript 复制代码

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

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

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

参考视频：尚硅谷微信小程序开发教程