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

这篇文章将为大家详细讲解有关Vue如何使用$set和$delete操作对象属性，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

一、$set

在开始讲解$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操作对象属性"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。