<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../jquery/vue.JS"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnClick">按钮</button>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
letters: ['A','B','C','D','E']
},
methods: {
btnClick(){
//1. push方法 添加
//this.letters.push("aaa");
//this.letters.push("aaa","bbb","ccc");
//2. pop()
//删除数组中的最后一个元素
//this.letters.pop()
//3. shift()
//删除数组中的第一个元素
//this.letters.shift()
//4. unshift()
//在数组的最前面添加元素
//this.letters.unshift("bbb")
//this.letters.unshift("aaa","bbb","ccc");
//5. splice()
//splice的作用：删除元素/插入元素/替换元素
// param1：索引下标
// param2：
// 删除元素：移除的数量（如果没有传，就删除下标后的所有元素）
// 插入元素：参数必须为0表示插入，并且后面跟上要插入的元素
// 替换元素：表示我们要替换几个元素，后面是用于替换前面的元素
// param3：添加的数据
//this.letters.splice(2,0,"BBB")
//6. sort()
// 排序
//this.letters.sort();
//7. reverse()
//将数据进行反转
//this.letters.reverse();
//通过索引值修改数组中的元素 不是进行的动态的刷新
//8. 通过索引值修改数组中的元素
//this.letters[0] = "bbbb";
/**
* vue内部的实现方式 Vue.set() 方法
* param1：要修改的对象
* param2：索引值
* param3：修改后的值
*/
Vue.set(this.letters,0,"bbb")
}
}
});
</script>
</body>
</html>
