Vue使用$set和$delete操作对象属性
一、$set
【Vue使用$set和$delete操作对象属性】在开始讲解$set之前先看下面的一段代码,实现的功能:当点击“添加”按钮时,动态的给data里面的对象添加属性和值,代码示例如下:
添加属性 {{info.msg}}
先看看点击按钮之前的效果:
![Vue使用$set和$delete操作对象属性](https://img.it610.com/image/info11/74ca9d5482754d2bb057674dec22a3e6.jpg)
文章图片
从截图中可以看出这时info对象只有三个属性,点击“添加”按钮刷新,然后在看看info对象的属性,截图如下:
![Vue使用$set和$delete操作对象属性](https://img.it610.com/image/info11/9e584fc1d2384f26a37f39e5a63ce0c8.jpg)
文章图片
可以看出这时info对象增加了msg属性,但是界面上面没有显示出来msg属性的值。即:
如果在实例创建之后添加新的属性到实例上,不会触发视图更新。这时就需要使用$set了。代码示例如下:
添加属性 {{info.msg}}
效果:
![Vue使用$set和$delete操作对象属性](https://img.it610.com/image/info11/124e2c92cfaf4bccbe5a10083d5034f3.jpg)
文章图片
可以看出:使用了$set之后视图会被更新。
注意:如果是修改对象里面已经存在的属性,则直接修改即可代码示例如下:
添加属性 {{info.msg}}name值:{{info.name}}
效果:
![Vue使用$set和$delete操作对象属性](https://img.it610.com/image/info11/c42063d300094eaa9b6a4b38724b1b79.jpg)
文章图片
二、$delete删除对象属性 可以使用$delete删除对象里面的属性,代码示例如下:
添加属性 {{info.msg}}name值:{{info.name}}
效果:
![Vue使用$set和$delete操作对象属性](https://img.it610.com/image/info11/03457488bb634ebd9a04e03cf9b9f85b.jpg)
文章图片
到此这篇关于Vue使用$set和$delete操作对象属性的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
推荐阅读
- java项目精品实战案例|基于Java+SpringMvc+vue+element实现校园闲置物品交易网站
- Vue中的生命周期介绍
- mybatis使用Integer类型查询可能出现的问题
- k8s线上某些特殊情况强制删除|k8s线上某些特殊情况强制删除 StatefulSet 的 Pod 要考虑什么隐患()
- webgl未使用独立显卡报告
- 深度学习|Colab使用教程
- 详解在vue3中使用jsx的配置以及一些小问题
- vue|vue @input带参数_Vue组件通信详解
- 浅谈VueUse设计与实现
- 手写|手写 Vue 系列 之 Vue1.x