<!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>Document</title>
</head>
<body>
<div id="app">
{{items}}
</div>
<script src="vue.js"></script>
<script>
const vm=new Vue({
el:"#app",
data:{
items:[1,2,3,4,5],
}
});
vm.items[0]="x";
//数组以改变，视图不会更新
vm.items.length=3;
// 数组长度已改变，但视图不会更新
// 解决方案：
// Vue.set(vm.items,1,"x");
// vm.items.splice(0,2,"Y"); //添加一个 "Y"
// 数组视图都会更新
// vm.items.splice(2);
// 数组长度视图都更新
// 变异方法改变了旧的数组，所以view层会更新 pop(),splice(截取位置，截取长度，新添加项)，shift()
// 非变异方法没有改变旧的数组，只是生成了新的数组所以view层不会更新 fliters(),concat(),slice()
</script>
</body>
</html>
vue响应式Vue.set()方法
猜你喜欢
转载自blog.csdn.net/gcy_rose/article/details/86561999
今日推荐
周排行