<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>数组/对象更新检测</title>
</head>
<body>
<div class="app">
{{obj}}
</div>
</body>
<script src="js/vue.js" charset="utf-8"></script>
<script type="text/javascript">
var vm=new Vue({
el:'.app',
data:{
obj:{
"name":"李",
"age":'30',
},
arr:[1,2,3,4]
},
//数组的更新检测：//
//vue提供了观察数组的变异方法，当以下方法调用时，视图会响应式更新
//push() pop()
//shift() unshift()
//splice() sort()
//reverse()
//数组还有一些非变异的方法，当使用这些（如：filter(), concat() 和 slice()）方法时，可以用返回的新数组替换原有的旧数组
//对象的更改检测://
vm.obj.age=20;//dom更新(直接改值)
vm.obj.cat='小猫'//dom不更新，原始数值改变（新增）
//通过vm.$set是Vue.set的别名
Vue.set(vm.obj,'gender', "男");//1：dom更新，原始数值同时更新（新增）
vm.$set(vm.obj,'type','1')//2:dom更新，原始数值同时更新（新增）
//我们想利用vue的Object.assign()或者 _.extend()方法添加多个对象的属性，需要这样写（新增）
vm.obj = Object.assign({}, vm.obj, {
Color: 'Vue Green',
bg:'#000',
address:'广东',
name:'李特成'
})
});
</script>
</html>
vue数组检测和对象检测更新
猜你喜欢
转载自blog.csdn.net/a4561614/article/details/81083940
今日推荐
周排行