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

这篇文章介绍了Vue使用$set和$delete操作对象属性的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下 一、$set

在开始解释$set之前，先看下面的代码实现功能:当点击ldquo添加rdquo按钮，向数据中的对象动态添加属性和值。代码示例如下:

lt;!DOCTYPE htmlgt;lt;html lang="en"gt;lt;headgt; lt;meta charset="UTF-8"gt; lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt; lt;meta http-equiv="X-UA-Compatible" content="ie=edge"gt; lt;titlegt;添加属性lt;/titlegt; lt;!--引入vue.js--gt; lt;script src="node_modules/vue/dist/vue.js" gt;lt;/scriptgt; lt;scriptgt; window.onload=function(){ new Vue({ el:'#app',// 2.0不允许挂载到html,body元素上 data:{ info:{id:1,price:15,name:"套餐A"} }, methods:{ add:function(){ // 给info对象添加msg属性并赋值 this.info.msg="hello"; } } }); } lt;/scriptgt;lt;/headgt;lt;bodygt; lt;div id="app"gt; {{info.msg}} lt;button @click="add"gt;添加lt;/buttongt; lt;/divgt;lt;/bodygt;lt;/htmlgt;

先看看效果再点按钮:

从截图中可以看出，info对象此时只有三个属性。点击ldquo添加rdquo按钮进行刷新，然后查看info对象的属性。截图如下:

可以看到，此时info对象中添加了msg属性，但是界面上并没有显示msg属性的值。即:

如果在实例创建后向其添加了新属性，将不会触发视图更新。

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

lt;!DOCTYPE htmlgt;lt;html lang="en"gt;lt;headgt; lt;meta charset="UTF-8"gt; lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt; lt;meta http-equiv="X-UA-Compatible" content="ie=edge"gt; lt;titlegt;添加属性lt;/titlegt; lt;!--引入vue.js--gt; lt;script src="node_modules/vue/dist/vue.js" gt;lt;/scriptgt; lt;scriptgt; window.onload=function(){ new Vue({ el:'#app',// 2.0不允许挂载到html,body元素上 data:{ info:{id:1,price:15,name:"套餐A"} }, methods:{ add:function(){ // 给info对象添加msg属性并赋值 //this.info.msg="hello"; this.$set(this.info,"msg","hello"); } } }); } lt;/scriptgt;lt;/headgt;lt;bodygt; lt;div id="app"gt; {{info.msg}} lt;button @click="add"gt;添加lt;/buttongt; lt;/divgt;lt;/bodygt;lt;/htmlgt;

效果:

可以看到使用$set后视图会更新。

注意:如果要修改对象中的现有属性，可以直接修改。

代码示例如下:

lt;!DOCTYPE htmlgt;lt;html lang="en"gt;lt;headgt; lt;meta charset="UTF-8"gt; lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt; lt;meta http-equiv="X-UA-Compatible" content="ie=edge"gt; lt;titlegt;添加属性lt;/titlegt; lt;!--引入vue.js--gt; lt;script src="node_modules/vue/dist/vue.js" gt;lt;/scriptgt; lt;scriptgt; window.onload=function(){ new Vue({ el:'#app',// 2.0不允许挂载到html,body元素上 data:{ info:{id:1,price:15,name:"套餐A"} }, methods:{ add:function(){ // 给info对象添加msg属性并赋值 //this.info.msg="hello"; this.$set(this.info,"msg","hello"); }, modify:function(){ this.info.name="套餐B"; } } }); } lt;/scriptgt;lt;/headgt;lt;bodygt; lt;div id="app"gt; {{info.msg}} name值：{{info.name}} lt;button @click="add"gt;添加lt;/buttongt; lt;button @click="modify"gt;修改lt;/buttongt; lt;/divgt;lt;/bodygt;lt;/htmlgt;

效果:

二、$delete删除对象属性

您可以使用$delete删除对象中的属性。代码示例如下:

lt;!DOCTYPE htmlgt;lt;html lang="en"gt;lt;headgt; lt;meta charset="UTF-8"gt; lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt; lt;meta http-equiv="X-UA-Compatible" content="ie=edge"gt; lt;titlegt;添加属性lt;/titlegt; lt;!--引入vue.js--gt; lt;script src="node_modules/vue/dist/vue.js" gt;lt;/scriptgt; lt;scriptgt; window.onload=function(){ new Vue({ el:'#app',// 2.0不允许挂载到html,body元素上 data:{ info:{id:1,price:15,name:"套餐A"} }, methods:{ add:function(){ // 给info对象添加msg属性并赋值 //this.info.msg="hello"; this.$set(this.info,"msg","hello"); }, modify:function(){ this.info.name="套餐B"; }, del:function(){ // 删除info对象里面的price属性 this.$delete(this.info,"price"); } } }); } lt;/scriptgt;lt;/headgt;lt;bodygt; lt;div id="app"gt; {{info.msg}} name值：{{info.name}} lt;button @click="add"gt;添加lt;/buttongt; lt;button @click="modify"gt;修改lt;/buttongt; lt;button @click="del"gt;删除lt;/buttongt; lt;/divgt;lt;/bodygt;lt;/htmlgt;

效果:

这就是这篇关于Vue使用$set和$delete操作对象属性的文章。希望对大家的学习有所帮助