小程序 wxml 语法 —— 37 setData()

这一节主要演示如何新增、修改和删除对象数据中单个/多个属性，我们直接使用微信开发者工具进行演示；

新增单个/多个属性

在 pages/cate/cate.js 中添加数据声明和对应的新增属性方法，如下：

Page({// 在小程序页面中所需要使用的数据均来自 data 对象data: {userInfo: {}},// 新增单个 / 多个属性updateUserInfo() {this.setData({// 如果给对象新增属性，可以将 key 写成数据路径的方式 a.b.c'userInfo.name': 'tom'})}
})

在 pages/cate/cate.wxml 中添加对应的页面样式，如下：

<view>{{ userInfo.name }}</view>
<button type="warn" bind:tap="updateUserInfo">修改对象类型数据</button>

刷新页面，点击按钮，可以发现新增的 name 值在页面上显示了，如下：

在这里插入图片描述
如果需要新增多个属性值，写法是一样的，也要写成一个数据路径，下面演示一下新增多个属性：

在 pages/cate/cate.wxml 中添加对应的页面样式，如下：

<view>{{ userInfo.name }}</view>
<view>{{ userInfo.age }}</view>
<button type="warn" bind:tap="updateUserInfo">修改对象类型数据</button>

在 pages/cate/cate.js 中添加数据声明和对应的新增属性方法，如下：

Page({// 在小程序页面中所需要使用的数据均来自 data 对象data: {userInfo: {}},// 新增单个 / 多个属性updateUserInfo() {this.setData({// 如果给对象新增属性，可以将 key 写成数据路径的方式 a.b.c'userInfo.name': 'tom','userInfo.age': 10})}
})

刷新页面，点击按钮，可以发现新增的 name 值和 age 值在页面上显示了，如下：

在这里插入图片描述

修改单个/多个属性

在 pages/cate/cate.wxml 中添加对应的页面样式，如下：

<view>{{ userInfo.name }}</view>
<view>{{ userInfo.age }}</view>
<button type="warn" bind:tap="updateUserInfo">修改对象类型数据</button>

在 pages/cate/cate.js 中添加数据声明和对应的新增属性方法，如下：

Page({// 在小程序页面中所需要使用的数据均来自 data 对象data: {userInfo: {'name': 'tom','age': 10}},// 修改单个 / 多个属性updateUserInfo(){this.setData({// 如果给对象修改属性，可以将 key 写成数据路径的方式 a.b.c'userInfo.name': 'jerry','userInfo.age': 18})}
})

刷新页面，点击按钮，可以发现修改的 name 值和 age 值在页面上显示了，如下：

在这里插入图片描述
在上面的演示中，不管新增数据或者修改数据，都需要使用数据路径的方式 a.b.c，使用起来比较麻烦，所以我们需要优化一下，我们可以使用 ES6 提供的展开运算符和 Object.assign() ；

ES6 展开运算符方法

Page({// 在小程序页面中所需要使用的数据均来自 data 对象data: {userInfo: {'name': 'tom','age': 10}},// 修改单个 / 多个属性updateUserInfo(){// ES6 提供的展开运算符// 通过展开运算符能够将对象中的属性复制给另一个对象// 后面的属性会覆盖前面的属性const userInfo = {...this.userInfo,name: 'jerry',age: 18}this.setData({userInfo})},
})

Object.assign 方法

Page({// 在小程序页面中所需要使用的数据均来自 data 对象data: {userInfo: {'name': 'tom','age': 10}},// 修改单个 / 多个属性updateUserInfo(){const userInfo = Object.assign(this.data.userInfo, {name: 'jerry'}, {age: 18});this.setData({userInfo})},
})

删除单个/多个属性

在 pages/cate/cate.js 中添加数据声明和对应的删除属性方法，如下：

Page({// 在小程序页面中所需要使用的数据均来自 data 对象data: {userInfo: {'name': 'tom','age': 10,'test': 111}},// 删除单个 / 多个属性updateUserInfo(){// 删除单个属性delete this.data.userInfo.agethis.setData({userInfo: this.data.userInfo})// 删除多个属性const {age, test, ...rest} = this.data.userInfothis.setData({userInfo: rest})},
})