vue的数组页面响应

vue的数组页面响应

vue的数组和普通的JavaScript数组没有什么太大的区别，但是由于 JavaScript 的限制，Vue 不能检测数组和对象的变化，所以导致很多数组变化是没办法做到实时更新的，这些方法的了解可以帮助我们更好的使用vue，同时也可以巩固一下JavaScript的知识
数组响应式改变
1、使用push()方法可以响应式更新,可以在数组最后面添加一个新的元素

<div id ="app">
    <ul>
        <li v-for="item in arr">{
   {
   item}}</li>
    </ul>
    <button @click="btnclick">按钮</button>
</div>

<script>
 let app = new Vue({
   
    el: '#app',
    data: {
   
        arr:[1,2,3,4,5],
    },
    methods: {
   
        btnclick(){
   
            //push不只可以添加一个，可以添加多个,以下两种都可以
            //this.arr.push("aaa");
            this.arr.push("aaa","bbb","ccc");
        }
    }
 });
</script>

2、unshift ()在数组最前面添加元素，和push一样可以添加多个元素

<div id ="app">
    <ul>
        <li v-for="item in arr">{
   {
   item}}</li>
    </ul>
    <button @click="btnclick">按钮</button>
</div>

<script>
 let app = new Vue({
   
    el: '#app',
    data: {
   
        arr:[1,2,3,4,5],
    },
    methods: {
   
        btnclick(){
   
            this.arr.unshift("aaa","bbb","ccc");
        }
    }
 });
</script>

3、pop() 在数组最后面删除元素

<div id ="app">
    <ul>
        <li v-for=