这里列举的方法有：
- pushpop
- shift
- unshift
- splice
- sort
- reverse
- Vue.set
点击按钮进行操作
html代码：
<div id="app">
<h3>操作数组的方法：</h3>
<hr/>
<h4>其中可以做到操作数据是响应式的有:push、pop、shift、unshift、splice、sort、reverse、Vue.set</h4>
<span><h4>注意：<p style="color: brown;font-weight: bold;">通过数组的索引值修改数组元素</p></h4></span>
<ul>
<li v-for="item in phones" :key="item">{{item}}</li>
</ul>
<button @click="btn1Click">push末尾添加</button>
<button @click="btn2Click">pop未尾删除1个</button>
<button @click="btn3Click">shift头部删除1个</button>
<button @click="btn4Click">unshift头部添加</button>
<button @click="btn5Click">splice删除/插入/替换</button>
<button @click="btn6Click">sort排序</button>
<button @click="btn7Click">reverse反转</button>
<button @click="btn8Click">Vue的set方法</button>
</div>
javascript代码：
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
const app = new Vue({
el:‘#app‘,
data:{
phones: [‘iPhone 12 Pro‘, ‘XiaoMi 11‘, ‘Huawei Mate 40 ‘, ‘Samsung s20 Ultra‘,‘Lenovo Z2K Pro‘,‘iPhone 11‘]
},
methods:{
btn1Click(){
// push()：向数组的末尾添加一个或多个元素，并返回新的长度
this.phones.push(‘push‘,‘push again‘)
},
btn2Click(){
// 2.pop(): 删除数组中的最后一个元素
this.phones.pop()
},
btn3Click(){
// 3.shift(): 删除数组中的第一个元素
this.phones.shift()
},
btn4Click(){
// 4.unshift(): 在数组最前面添加元素
this.phones.unshift(‘unshift 1‘,‘unshift 2‘)
},
btn5Click(){
// 5.splice作用: 删除元素/插入元素/替换元素
// 参数：(从第几个元素开始操作,删除/替换几个元素,删除/替换成/插入 什么)
// 删除元素: 第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素)
// 替换元素: 第二个参数, 表示我们要替换几个元素, 后面是用于替换前面的元素
// 插入元素: 第二个参数, 传入0, 并且后面跟上要插入的元素
this.phones.splice(‘1‘,‘2‘,‘诺基亚‘,‘摩托罗拉‘)
},
btn6Click(){
// 4.sort(): 对数组元素进行排序
this.phones.sort()
},
btn7Click(){
// 4.reverse(): 把数据组元素进行反转
this.phones.reverse()
},
btn8Click(){
// Vue.set(要修改的对象,修改第几个元素,修改后的值)
Vue.set(this.phones, 0, ‘I am the first One‘)
}
}
})
</script>