vue $set对象,vue.set的作用
这篇文章介绍了某视频剪辑软件使用$set和$删除操作对象属性的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
一、$set
在开始讲解$set之前先看下面的一段代码，实现的功能：当点击"添加"按钮时，动态的给数据里面的对象添加属性和值，代码示例如下：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
标题添加属性/标题
！-引入vue.js -
脚本src= node _ modules/vue/dist/vue。js /脚本
脚本
window.onload=function(){
新Vue({
el:#app ，//2.0不允许挂载到html，正文元素上
数据：{
信息：{id:1，价格：15,名称：套餐A}
},
方法：{
add:function(){
//给信息对象添加味精属性并赋值
这个。信息。msg= hello
}
}
});
}
/脚本
/头
身体
div id=应用程序
{{info.msg}}
按钮@click=添加添加/按钮
/div
/body
/html
先看看点击按钮之前的效果：
从截图中可以看出这时信息对象只有三个属性，点击"添加"按钮刷新，然后在看看信息对象的属性，截图如下：
可以看出这时信息对象增加了味精属性，但是界面上面没有显示出来味精属性的值。即：
如果在实例创建之后添加新的属性到实例上，不会触发视图更新。
这时就需要使用$set了。代码示例如下：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
标题添加属性/标题
！-引入vue.js -
脚本src= node _ modules/vue/dist/vue。js /脚本
脚本
window.onload=function(){
新Vue({
el:#app ，//2.0不允许挂载到html，正文元素上
数据：{
信息：{id:1，价格：15,名称：套餐A}
},
方法：{
add:function(){
//给信息对象添加味精属性并赋值
//这个。信息。msg= hello
这个. set(this.info， msg ， hello )；
}
}
});
}
/脚本
/头
身体
div id=应用程序
{{info.msg}}
按钮@click=添加添加/按钮
/div
/body
/html
效果：
可以看出：使用了$set之后视图会被更新。
注意：如果是修改对象里面已经存在的属性，则直接修改即可
代码示例如下：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
标题添加属性/标题
！-引入vue.js -
脚本src= node _ modules/vue/dist/vue。js /脚本
脚本
window.onload=function(){
新Vue({
el:#app ，//2.0不允许挂载到html，正文元素上
数据：{
信息：{id:1，价格：15,名称：套餐A}
},
方法：{
add:function(){
//给信息对象添加味精属性并赋值
//这个。信息。msg= hello
这个. set(this.info， msg ， hello )；
},
modify:function(){
this.info.name=套餐b’；
}
}
});
}
/脚本
/头
身体
div id=应用程序
{{info.msg}}
名字值：{{info.name}}
按钮@click=添加添加/按钮
按钮@click=修改修改/按钮
/div
/body
/html
效果：
二、$delete删除对象属性
可以使用$删除删除对象里面的属性，代码示例如下：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
标题添加属性/标题
！-引入vue.js -
脚本src= node _ modules/vue/dist/vue。js /脚本
脚本
window.onload=function(){
新Vue({
el:#app ，//2.0不允许挂载到html，正文元素上
数据：{
信息：{id:1，价格：15,名称：套餐A}
},
方法：{
add:function(){
//给信息对象添加味精属性并赋值
//这个。信息。msg= hello
这个. set(this.info， msg ， hello )；
},
modify:function(){
this.info.name=套餐b’；
},
德尔：函数(){
//删除信息对象里面的价格属性
这个. delete(this.info， price )；
}
}
});
}
/脚本
/头
身体
div id=应用程序
{{info.msg}}
名字值：{{info.name}}
按钮@click=添加添加/按钮
按钮@click=修改修改/按钮
button @click=del 删除/按钮
/div
/body
/html
效果：
到此这篇关于某视频剪辑软件使用$set和$删除操作对象属性的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。