数组中有哪些方法是响应式的
Posted So istes immer
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了数组中有哪些方法是响应式的相关的知识，希望对你有一定的参考价值。
什么是响应式？
当数据发生改变时，页面能及时得到更新
非响应式方法：通过修改索引值来改变数组中的元素
响应式方法：
1.push() 在数组末尾添加元素，可添加多个
2.pop() 删除数组的最后一个元素
3.shift() 删除数组的第一个元素
4.unshift() 在数组最前面添加元素，可添加多个
5.splice()
删除元素：第一个参数传开始删除的位置，第二个参数传要删除元素的个数，如果没有传，就删除后面所有元素
替换元素：第一个参数传开始替换的位置，第二个参数传要替换的个数，后面是用于替换前面的元素
插入元素：第一个参数传开始插入的位置，第二个参数传0，后面是用于插入的元素
6.sort() 排序
7.reverse() 反转，数组元素的顺序倒过来
8.set方法 set(要修改的对象，索引值，修改后的值)
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnClick">通过索引值</button>
<button @click="btnClick2">push</button>
<button @click="btnClick3">pop</button>
<button @click="btnClick4">shift</button>
<button @click="btnClick5">unshift</button>
<button @click="btnClick6">splice删除</button>
<button @click="btnClick7">splice替换</button>
<button @click="btnClick8">splice插入</button>
<button @click="btnClick9">sort</button>
<button @click="btnClick10">reverse</button>
<button @click="btnClick11">set</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
letters: ['g','b','a','d','e']
},
methods:{
btnClick(){
this.letters[2]='m'; //通过修改索引值来改变数组中的元素(非响应式)
},
btnClick2(){
this.letters.push('sss');
},
btnClick3() {
this.letters.pop();
},
btnClick4(){
this.letters.shift();
},
btnClick5(){
this.letters.unshift('aa','bb','cc');
},
btnClick6(){
//this.letters.splice(2);
this.letters.splice(2,1);
},
btnClick7(){
this.letters.splice(1,3,'aa','bb','cc');
},
btnClick8(){
this.letters.splice(1,0,'dd','ee','ff');
},
btnClick9(){
this.letters.sort();
},
btnClick10(){
this.letters.reverse();
},
btnClick11(){
Vue.set(this.letters,0,'kkk');
}
}
})
</script>
</body>
</html>
以上是关于数组中有哪些方法是响应式的的主要内容，如果未能解决你的问题，请参考以下文章