vue设置为空
我们知道vue2 是通过object.definepropertiy()方法实现响应式数据的,那么这个方法有一个缺陷就是数组无法侦听,所以vue是通过对数组操作方法重写实现的
- 那么通过数组的.length=0方法设置为空vue是侦听不到变化的所以导致页面不刷新`
需要注意的vue3是没有这个问题的
解决方法
arr=[]
代码实测(vue2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue2测试数组</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ arr }}
<button @click="arrPush">添加</button>
<button @click="deleteArr">删除</button>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
arr: []
},
methods: {
arrPush() {
this.arr.push(1)
},
deleteArr() {
this.arr.length = 0
console.log(this.arr)
}
}
})
</script>
</html>