可实现响应式的数组操作(操作数组的方法)
2020-07-08 本文已影响0人
瑟闻风倾
因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据的变化，视图会对应进行更新。
Vue中包含来一组观察数组编译的方法，使用它们改变数组也会触发视图的更新：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
注意：通过索引值修改数组元素时，视图并不会进行响应式变化。可通过splice()方法或Vue.set()来实现修改元素并刷新视图。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="../first/vue1026.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in list" :key="item">{{item}}</li>
</ul>
<button @click="btn1Click()">从尾部添加一个或多个元素</button>
<button @click="btn2Click()">从尾部删除</button>
<button @click="btn3Click()">从头部删除</button>
<button @click="btn4Click()">从头部添加一个或多个元素</button>
<button @click="btn5Click()">增删改元素</button>
<button @click="btn6Click()">排序</button>
<button @click="btn7Click()">翻转</button>
<button @click="btn8Click()">注意</button>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
list:['a','b','c','d']
},
methods:{
btn1Click(){
/* 1. 在数组尾部添加一个或多个元素 */
this.list.push('e')
// this.list.push('e','f','g')
},
btn2Click(){
/* 2. 删除数组最后一个元素 */
this.list.pop()
},
btn3Click(){
/* 3. 删除数组第一个元素 */
this.list.shift()
},
btn4Click(){
/* 4. 在数组头部添加一个或多个元素 */
// this.list.unshift('aa')
this.list.unshift('aa','aaa','aaaa')
},
btn5Click(){
/* 5. splice作用：删除元素/插入元素/替换元素 */
// 删除元素：第二个参数为要删除的几个元素（若不传第二个参数，则删除后面所有元素）
this.list.splice(1,2)
// this.list.splice(1)
// 插入元素：第二个参数为0，后面为要插入的元素
// this.list.splice(1,0,'h','i','j','k','l','m','n')
// 替换元素：第二个参数表示要替换几个元素，后面是用于替换前面的元素
// this.list.splice(1,2,'h','i','j','k','l','m','n')
},
btn6Click(){
/* 6. 排序 */
this.list.sort()
},
btn7Click(){
/* 7. 翻转 */
this.list.reverse()
},
btn8Click(){
/* 注意：通过索引值修改数组元素时，视图并不会进行响应式变化 */
this.list[0] = 'liy' //this.list.splice(0,1,'liy')
alert('通过索引值修改数组元素时，视图并不会进行响应式变化')
// 通过splice方法来实现
this.list.splice(0,1,'liy')
// 通过Vue内部实现的set方法来实现：Vue.set(要修改的对象，索引值，修改后的值）
Vue.set(this.list,0,'liy')
}
}
});
</script>
</html>
