Vue 是数据驱动的,如果某个数据的类型是数组类型,在一些数组的操作下是可以更新页面的,还有一些数组的操作不会引起页面的更新.
下列的数组方法是可以引起页面更新的(变异方法):
push() 尾部添加
pop() 尾部删除
shift() 头部删除
unshift() 头部添加
splice() 高级方法,删除、添加、替换
sort() 排序方法
reverse() 颠倒顺序
!!下面两种方式修改数组是不会引起页面的更新的:
1. 直接通过下标的方式去修改数组: vm.fruits[1] = '我的天'
2. 直接通过修改数组的length属性的方式:vm.fruits.length = num
解决上面两个情况的方案
1.
(1). 使用 Vue.set(target, index, value) 静态方法
(2). 使用 实例对象的 $set() 实例方法 vm.$set(target, index, value)
Vue.set() 与 vm.$set() 语法和作用都是一样的。随你选择使用哪种方式
Vue.set(target, index, value)
target 要修改的数据源
index 要修改的下标
value 要修改成什么样
2. 直接换成 splice() 方法来操作即可
vm.fruits.splice(1)