<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<!-- :key内绑定index无意义，需要绑定item -->
<li v-for="item in letters" :key="item">{{item}}</li>
</ul>
<button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
letters: ['5', '1', '2', '3']
},
methods: {
btnClick() {
// 1.push 方法
// this.letters.push('aaa')
// this.letters.push('aaaa', 'vvvvv', 'sssss')
// 2.pop() 也可以做响应式
// pop()删除数组中的最后一个元素
// this.letters.pop();
// 3.shift() 删除数组中的第一个元素
// this.letters.shift();
// 4.unshift() 在数组最前面添加元素
// this.letters.unshift('aaaaa');
// this.letters.unshift('aaaa', 'vvvvv', 'sssss')
// 5.splice() 删除元素/插入元素/替换元素
// 删除元素: 第二个参数传入你要删除几个元素(如果没有传就删除所有的元素)
// 替换元素: 第二个参数书,表示我们要替换几个元素.后面是用于替换前面的元素
//插入元素: 第二个参数,传入0,并且后面跟上要插入的元素
// splice(start)
// this.letters.splice(1, 2, 'm', 'n', 'l');
// this.letters.splice(1, 0, 'x', 'y', 'l');
// 5.sort() 排序
// this.letters.sort()
// 6.reverse() 反转
// this.letters.sort()
}
}
})
</script>
</body>
</html>
