VUE 实现动态给对象增加属性，并触发视图更新操作示例
更新时间：2019年11月29日 11:52:20 作者：自由港
这篇文章主要介绍了VUE 实现动态给对象增加属性，并触发视图更新操作,涉及vue.js对象属性动态操作及视图更新相关实现技巧,需要的朋友可以参考下
本文实例讲述了VUE 实现动态给对象增加属性，并触发视图更新操作。分享给大家供大家参考，具体如下：
在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。
根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上。
我们编写如下代码测试给一个对象动态添加属性：
<div id="app">
<input v-model="form.amount" />
<input type="button" @click="demoSet()" value="setName">
</div>
<script type="text/javascript">
var vm=new Vue({
el: "#app",
data: {
i:0,
form:{}
},
methods:{
demoSet(){
this.form.amount=this.i++;
//this.$set(this.form,"amount",this.i++);
}
}
});
</script>
这种方式可以给form增加一个属性，但是不会界面不会响应更新。
正确的做法：
<div id="app">
<input v-model="form.amount" />
<input type="button" @click="demoSet()" value="setName">
</div>
<script type="text/javascript">
var vm=new Vue({
el: "#app",
data: {
i:0,
form:{}
},
methods:{
demoSet(){
this.$set(this.form,"amount",this.i++);
}
}
});
</script>
这样就可以给对象添加amount 属性了。
这个有什么应用场景呢，比如 data.form 属性很多，其中大部分是不需要要的，这时候，可以使用这种方法实现动态添加需要的属性。
需要注意的是，这种方式是不能给根数据添加属性的，比如：
<div id="app">
<input v-model="name" />
<input type="button" @click="demoSet()" value="setName">
</div>
<script type="text/javascript">
var vm=new Vue({
el: "#app",
data: {
},
methods:{
demoSet(){
this.$set(this,"name","ray");
}
}
});
</script>
这种方式给data 增加一个 name 属性是无效的。
希望本文所述对大家vue.js程序设计有所帮助。
相关文章
这篇文章主要给大家介绍了关于如何优雅地在vue中添加权限控制的相关资料，文中通过示例代码以及图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
本文主要介绍了vue项目中路由懒加载的三种方式,主要包括vue异步组件,组件懒加载,webpack的require.ensure(),具有一定的参考价值,感兴趣的可以了解一下2024-01-01
这篇文章主要介绍了vue 实现动态路由的方法，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
这篇文章主要介绍了Vue2.0 ES6语法降级ES5的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了vue ajax 拦截原理与实现方法,结合实例形式分析了vue.js基于ajax拦截实现无刷新登录的相关原理与操作技巧,需要的朋友可以参考下2019-11-11
vue自定义插件封装，实现简易的elementUi的Message和MessageBox的示例
这篇文章主要介绍了vue自定义插件封装，实现简易的elementUi的Message和MessageBox的示例，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-11-11
这篇文章主要想来和大家一起探讨一下Vue为什么需要同时使用Ref和Reactive，文中的示例代码简洁易懂，感兴趣的小伙伴可以跟随小编一起了解一下2023-08-08
这篇文章主要为大家介绍了LogicFlow内置菜单插件实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
今天小编就为大家分享一篇解决vue项目nginx部署到非根目录下刷新空白的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了vue简单实现转盘抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
最新评论