小步调 wxml 语法 —— 37 setData() - 修改对象范例数据

这一节告急演示怎样新增、修改和删除对象数据中单个/多个属性，我们直接使用微信开辟者工具举行演示；
新增单个/多个属性

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

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

复制代码

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

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

复制代码

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

如果必要新增多个属性值，写法是一样的，也要写成一个数据路径，下面演示一下新增多个属性：

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

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

复制代码

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

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

复制代码

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

修改单个/多个属性

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

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

复制代码

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

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

复制代码

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

在上面的演示中，不管新增数据大概修改数据，都必要使用数据路径的方式 a.b.c，使用起来比力贫苦，以是我们必要优化一下，我们可以使用 ES6 提供的睁开运算符和 Object.assign() ；

• ES6 睁开运算符方法
  

1. Page({
2.   // 在小程序页面中所需要使用的数据均来自 data 对象
3.   data: {
4.     userInfo: {
5.       'name': 'tom',
6.       'age': 10
7.     }
8.   },
9.   // 修改单个 / 多个属性
10.   updateUserInfo(){
11.     // ES6 提供的展开运算符
12.     // 通过展开运算符能够将对象中的属性复制给另一个对象
13.     // 后面的属性会覆盖前面的属性
14.     const userInfo = {
15.       ...this.userInfo,
16.       name: 'jerry',
17.       age: 18
18.     }
20.     this.setData({
21.       userInfo
22.     })
23.   },
24. })

复制代码

• Object.assign 方法
  

1. Page({
2.   // 在小程序页面中所需要使用的数据均来自 data 对象
3.   data: {
4.     userInfo: {
5.       'name': 'tom',
6.       'age': 10
7.     }
8.   },
9.   
10.   // 修改单个 / 多个属性
11.   updateUserInfo(){
12.     const userInfo = Object.assign(this.data.userInfo, {name: 'jerry'}, {age: 18});
13.     this.setData({
14.       userInfo
15.     })
16.   },
17. })

复制代码

删除单个/多个属性

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

1. Page({
2.   // 在小程序页面中所需要使用的数据均来自 data 对象
3.   data: {
4.     userInfo: {
5.       'name': 'tom',
6.       'age': 10,
7.       'test': 111
8.     }
9.   },
10.   // 删除单个 / 多个属性
11.   updateUserInfo(){
12.     // 删除单个属性
13.     delete this.data.userInfo.age
14.     this.setData({
15.       userInfo: this.data.userInfo
16.     })
18.     // 删除多个属性
19.     const {age, test, ...rest} = this.data.userInfo
21.     this.setData({
22.       userInfo: rest
23.     })
24.   },
25. })

复制代码

上面先容的方法只是修改对象范例数据的此中一种方法，并不是全部，我们可以使用别的的修改对象数据的方法；
参考视频：尚硅谷微信小步调开辟教程

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。