网站设计素材包网站建设安排总结

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

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

setData() 方法有两个作用：

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

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

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

  Page({// 在小程序页面中所需要使用的数据均来自 data 对象data:{num: 1},updateNum() {// 获取 num// console.log(this.data.num);// 通过赋值的方式直接修改数据 numthis.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 值实时更新了，如下图所示：

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