一、源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>用户登录切换小案例</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="(item,index) in letters">
                    {{index+1}}.{{item}}
                </li>
            </ul>
            <button @click="btnClick()">按钮</button>
        </div>
        <script src="./js/vue.js"></script>
        <script>
            const app = new Vue({
                el:'#app',
                data:{
                    letters:['猴哥','八戒','沙僧','唐僧']
                },
                methods:{
                    btnClick(){
                        this.letters.push('白龙马')
                    }
                }
            })
        </script>
        
    </body>
</html>

二、push方法

在数组最后面添加一个或多个元素。
语法：

this.letters.push('aaa')

例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>用户登录切换小案例</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="(item,index) in letters">
                    {{index+1}}.{{item}}
                </li>
            </ul>
            <button @click="btnClick()">按钮</button>
        </div>
        <script src="./js/vue.js"></script>
        <script>
            const app = new Vue({
                el:'#app',
                data:{
                    letters:['猴哥','八戒','沙僧','唐僧']
                },
                methods:{
                    btnClick(){
                        this.letters.push('aaa')
                    }
                }
            })
        </script>   
    </body>
</html>

三、pop()方法

删除数组中的最后一个元素，注意pop后面的小括号不可以省略！！！
语法：

this.letters.pop();

四、shift()

删除数组中的第一个元素
语法：

this.letters.shift();

五、unshift()

在数组最前面添加元素
语法：

this.letters.unshift()
this.letters.unshift('aaa','bbb','ccc')

六、splice

splice的作用有三种：删除元素，替换元素，插入元素。
其实语法很简单很容易记忆：
删除元素：第二个参数传入你要删除几个元素（如果没有传，就删除后面所有的元素）

this.letters.splice(1,3)

替换元素：第二个参数，表示我们要替换几个元素，后面是用于替换前面的元素

this.letters.splice(1,3,'白龙马','黑龙马','绿龙马')

插入元素：第二个参数，传入0，并且后面跟上要插入的元素

this.letters.splice(1,3,'白龙马','黑龙马','绿龙马')

上述三个例子中第一个参数（也就是1），代表的是从第二个元素（计算机从0开始计数）后面开始执行命令。

七、sort()

作用：排序
语法：

this.letters.sort()

八、reverse()

作用：实现数据反转。
顾名思义，原本顺序为abcd的四个元素，触发reverse()方法后，会变成dcba
语法：

this,letters.reverse()

九、set方法

在Vue中，如果直接利用数组索引值来修改元素的方法不是响应式的，故Vue中有一相同效果的方法——set。
语法：

Vue.set(this.letters,0,'bbbbb')
// set(要修改的对象,索引值,修改后的值)

Vue的数组中哪些方法是响应式的