<div id="demo">
<ul>
<li v-for="(item,index) in letters":key="index">{{item}}</li>
</ul>
<!-- 是响应式的 -->
<button @click="btn1">push添加元素</button>
<br>
<!-- 不是响应式的 -->
<button @click="btn2">通过索引值修改数组的元素</button>
</div>
<script>
let vm = new Vue({
el: '#demo',
data: {
letters:['a','b','c','d','e','f','g'],
},
methods:{
btn1(){
this.letters.push('push')
},
btn2(){
this.letters[0]='a000';
}
}
});
</script>
总结:
响应式的方法:
- push:在数组尾部添加元素,可以一次添加多个元素;
- pop:从数组尾部删除元素;
- shift:从数组开头删除元素;
- unshift:在数组最前面添加元素,可以一次添加多个元素;
- splice:可删除元素,可插入元素、可替换元素(start:操作元素的开始位置,(deleteCount):要操作元素的个数,不传就是删除后边所有,items:要替换的元素的数字);
- sort:排序;
- reserve:反转
非响应式的方法:
- 通过索引改变数组的元素