Vue学习12_Vue中数组的常用方法

数组的常用方法

1. push方法：push方法可以往数组最后面追加元素，既可以追加一个元素，也可以同时追加多个元素
   示例代码：使用push可以分别在数组最后追加元素，追加的元素可以是一个也可以是多个

<div id="app">
        <ul>
            <li v-for="letter in letters">
                {{letter}}
            </li>
            <!-- push往数组最后一行追加元素 -->
            <button @click="pushBtn">push方法</button>

            <!-- push往数组最后一行追加多个元素 -->
            <button @click="pushsBtn">push方法添加多个元素</button>
        </ul>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                letters: ['A', 'B', 'E', 'C', 'D']
            },
            methods: {
                pushBtn() {
                    this.letters.push('E')
                },
                pushsBtn() {
                    this.letters.push('a', 'b', 'c')
                }
            }
        });
    </script>

2. pop方法：pop方法可以删除数组的最后一个元素
   示例代码：使用pop方法可以删除数组的最后一个元素，与push方法相对

    <div id="app">
        <ul>
            <li v-for="letter in letters">
                {{letter}}
            </li>
            <!-- pop删除数组的最后一个元素 -->
            <button @click="popBtn">pop方法</button>
        </ul>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                letters: ['A', 'B', 'E', 'C', 'D']
            },
            methods: {
                popBtn() {
                    this.letters.pop()
                }
            }
        });
    </script>

3. shift方法：shift方法可以删除数组的第一个元素
   示例代码：

    <div id="app">
        <ul>
            <li v-for="letter in letters">
                {{letter}}
            </li>
            <!-- shift删除数组中的第一个元素 -->
            <button @click="shiftBtn">shift方法</button>
        </ul>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                letters: ['A', 'B', 'E', 'C', 'D']
            },
            methods: {
                shiftBtn() {
                    this.letters.shift()
                }
            }
        });
    </script>

4. unshift方法：unshift方法可以在数组第一个元素之前添加元素，可以添加一个也可以添加多个，与shift相对
   示例代码：

    <div id="app">
        <ul>
            <li v-for="letter in letters">
                {{letter}}
            </li>

            <!-- unshift在数组最前面添加元素 -->
            <button @click="unShiftBtn">unshift方法</button>

            <!-- unshift在数组最前面添加多个元素 -->
            <button @click="unShiftsBtn">unshift方法添加多个元素</button>

        </ul>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                letters: ['A', 'B', 'E', 'C', 'D']
            },
            methods: {
                unShiftBtn() {
                    this.letters.unshift('a')
                },
                unShiftsBtn() {
                    this.letters.unshift('a', 'b', 'c')
                },
            }
        });
    </script>

5. splice方法：splice拥有三种用法，增加删除与修改
   当splice的参数为1个时，表示删除该参数位置以后的所有元素；当splice参数为2时，表示删除从第一个参数开始，后面几个元素，删除几个元素取决于第二个参数的值；当splice参数为3个时，第一个参数表示从哪个位置开始，第二个参数必须为0，第三个参数以后便是所需要插入的值；当需要利用splice修改数组时，其实原理与插入元素差不多，就是将第二个参数修改成后面需要插入的值。
   简单来说，splice的第一个参数一般是表示操作的起始位置，第二个参数表示操作的位数，第三个参数开始后面的参数表示需要更改的新值
   示例代码：

    <div id="app">
        <ul>
            <li v-for="letter in letters">
                {{letter}}
            </li>
            <!-- splice的作用：删除元素、插入元素、替换元素 -->
            <!-- 
                操作的开始位置
                删除元素：
                  splice(start,num)从哪里开始，删除几位
                  splice(start)从哪里开始，后面全删除
             -->
            <button @click="splice1Btn">splice删除元素</button>
            <!-- splice插入元素 -->
            <button @click="splice2Btn">splice插入元素</button>
            <!-- splice修改元素 -->
            <button @click="splice3Btn">splice修改元素</button>
        </ul>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                letters: ['A', 'B', 'E', 'C', 'D']
            },
            methods: {
                splice1Btn() {
                    this.letters.splice(1, 1)
                },
                splice2Btn() {
                    this.letters.splice(1, 0, 'aaa')
                },
                splice3Btn() {
                    this.letters.splice(1, 2, 'b', 'c')
                },

            }
        });
    </script>

6. sort方法：sort方法用于对数组元素进行排序

    <div id="app">
        <ul>
            <li v-for="letter in letters">
                {{letter}}
            </li>
            <button @click="sortBtn">sort排列元素</button>

        </ul>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                letters: ['A', 'B', 'E', 'C', 'D']
            },
            methods: {

                sortBtn() {
                    this.letters.sort()
                }
            }
        });
    </script>

7. reverse方法：reverse方法可以对数组元素进行翻转，当需要对数组元素进行逆向排序时，可以同时使用sort和reverse
   示例代码：

    <div id="app">
        <ul>
            <li v-for="letter in letters">
                {{letter}}
            </li>
            <!-- reverse反转元素 -->
            <button @click="reverseBtn">reverse反转元素</button>
        </ul>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                letters: ['A', 'B', 'E', 'C', 'D']
            },
            methods: {
                reverseBtn() {
                    this.letters.reverse()
                }
            }
        });
    </script>