Vue使用$set和$delete操作对象属性 Vue使用$set和$delete操作对象属性

一、$set 【Vue使用$set和$delete操作对象属性】在开始讲解$set之前先看下面的一段代码，实现的功能：当点击“添加”按钮时，动态的给data里面的对象添加属性和值，代码示例如下：

添加属性 - 锐客网{{info.msg}}

先看看点击按钮之前的效果：

文章图片

从截图中可以看出这时info对象只有三个属性，点击“添加”按钮刷新，然后在看看info对象的属性，截图如下：

文章图片

可以看出这时info对象增加了msg属性，但是界面上面没有显示出来msg属性的值。即：

如果在实例创建之后添加新的属性到实例上，不会触发视图更新。

这时就需要使用$set了。代码示例如下：

添加属性 - 锐客网{{info.msg}}

效果：

文章图片

可以看出：使用了$set之后视图会被更新。

注意：如果是修改对象里面已经存在的属性，则直接修改即可

代码示例如下：

添加属性 - 锐客网{{info.msg}}name值：{{info.name}}

效果：

文章图片

二、$delete删除对象属性可以使用$delete删除对象里面的属性，代码示例如下：

添加属性 - 锐客网{{info.msg}}name值：{{info.name}}

效果：

文章图片

到此这篇关于Vue使用$set和$delete操作对象属性的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

Vue使用$set和$delete操作对象属性