一、源码
<!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(要修改的对象,索引值,修改后的值)
