Vue使用$set和$delete操作对象属性
一、$set
在开始讲解$set之前先看下面的一段代码，实现的功能：当点击“添加”按钮时，动态的给data里面的对象添加属性和值，代码示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>添加属性</title>
<!--引入vue.js-->
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
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";
}
}
});
}
</script>
</head>
<body>
<div id="app">
{{info.msg}}
<button @click="add">添加</button>
</div>
</body>
</html>
先看看点击按钮之前的效果：
从截图中可以看出这时info对象只有三个属性，点击“添加”按钮刷新，然后在看看info对象的属性，截图如下：
可以看出这时info对象增加了msg属性，但是界面上面没有显示出来msg属性的值。即：
如果在实例创建之后添加新的属性到实例上，不会触发视图更新。
这时就需要使用$set了。代码示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>添加属性</title>
<!--引入vue.js-->
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
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");
}
}
});
}
</script>
</head>
<body>
<div id="app">
{{info.msg}}
<button @click="add">添加</button>
</div>
</body>
</html>
效果：
可以看出：使用了$set之后视图会被更新。
注意：如果是修改对象里面已经存在的属性，则直接修改即可
代码示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>添加属性</title>
<!--引入vue.js-->
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
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";
}
}
});
}
</script>
</head>
<body>
<div id="app">
{{info.msg}}
name值：{{info.name}}
<button @click="add">添加</button>
<button @click="modify">修改</button>
</div>
</body>
</html>
效果：
二、$delete删除对象属性
可以使用$delete删除对象里面的属性，代码示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>添加属性</title>
<!--引入vue.js-->
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
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");
}
}
});
}
</script>
</head>
<body>
<div id="app">
{{info.msg}}
name值：{{info.name}}
<button @click="add">添加</button>
<button @click="modify">修改</button>
<button @click="del">删除</button>
</div>
</body>
</html>
效果：
到此这篇关于Vue使用$set和$delete操作对象属性的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
vue 中this.$set 动态绑定数据的案例讲解
感觉网上对this.$set的讲解乱糟糟的,我来总结一下对它单个数据.对象.数组.json数据的绑定. 话不多说直接上代码: <template> <div> <!-- 单个数据 --> <button @click="text0a">text0</button> <p>text0: {{text0}}</p> <!-- 对象 --> <button @click="text
-
vue中$set的使用(结合在实际应用中遇到的坑)
最近在开发过程中遇到一个问题.在节点上面写点击事件时,点击事件不执行.代码如下: <!-- 操作 --> <el-table-column label="操作"> <template slot-scope="scope"> <span class="poi icon-hover f16 mr20" @click='scope.row.edit=!scope.row.edit'> <svg-ic
-
vue $set 实现给数组集合对象赋值
vue $set 数组集合对象赋值 在vue自定义数组对象集合中,想要给每个数组对对象再添加一个属性和值. // data定义一个集合对象 responseData:[ {'id':'1','name':'女装','price':115,'num':1,'pic':'../static/img/1.jpg'}, {'id':'2','name':'男装','price':110,'num':1,'pic':'../static/img/2.jpg'}, {'id':'3','name':'童装'
-
vue $set 给数据赋值的实例
如果在实例创建之后添加新的属性到实例上,它不会触发视图更新. 业务介绍:模拟后台数据向DOM树上遍历数据,再向数据里添加状态属性,根据状态改变显示图片,默认nochecked.png,点击时改变状态.显示checked.png DOM树 <div class="cartContent" :class="{'bg' : status == 2}" v-for="(val,key) in imgListData" :id="key&q
-
Vue.set()和this.$set()使用和区别
在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新. 如下代码,给 student对象新增 age 属性 data () { return { student: { name: '', sex: '' } } } mounted () { // --钩子函数,实例挂载之后 this.student.age = 24
-
深入理解vue中的$set
在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新.如下代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue $set</title> <scri
-
vue中 this.$set的使用详解
目录 vue中 this.$set的使用 使用 为什么能够响应式? 分析 总结 vue中 this.$set的使用 背景:在我写前端项目的时候,后端给我们的一个json对象,并且我已经渲染在页面上了.但是由于我自己的需求,想往返回的对象里面添加一个字段,于是我用push一个字段进去,添加是添加进去了,但是页面渲染却没有变化.后来才意识到不是响应式的.如果我们要让这个新字段是响应式的,就要使用到this.$set来注入数据 当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象
-
Vue之vue.$set()方法源码案例详解
在使用vue开发项目的过程中,经常会遇到这样的问题:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. 这是因为新加入的属性不是响应式的,因此不会触发视图的更新,通常使用静态方法Vue.set()或者实例方法this.$set()解决 ,使用方式: 对象:this.$set(target,key, value) 数组:this.$set(target,index, value) 但不管是静态方法Vue.
-
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
vm.$delete() vm.$delete用法见官网. 为什么需要Vue.delete()? 在ES6之前, JS没有提供方法来侦测到一个属性被删除了, 因此如果我们通过delete删除一个属性, Vue是侦测不到的, 因此不会触发数据响应式. 见下面的demo. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta na
-
从vue源码解析Vue.set()和this.$set()
前言 最近死磕了一段时间vue源码,想想觉得还是要输出点东西,我们先来从Vue提供的Vue.set()和this.$set()这两个api看看它内部是怎么实现的. Vue.set()和this.$set()应用的场景 平时做项目的时候难免不会对 数组或者对象 进行这样的骚操作操作,结果发现,咦~~,他喵的,怎么页面没有重新渲染. const vueInstance = new Vue({ data: { arr: [1, 2], obj1: { a: 3 } } }); vueInstance.
-
vue.js中$set与数组更新方法
由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当利用索引直接设置数组的某一项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength,不会更新数组. 当然vue中给了解决方法,就是使用 Vue.set, vm.$set(Vue.set的变种写法)或者 splice,caoncat等修改数组,同时也将触发状态更新: ex: 所以如果在实例创建后添加新的属性到实例上,则不会触