数组中有哪些方法是响应式的

2021-05-15 15:33:57 阅读：185 来源： 互联网

什么是响应式？
当数据发生改变时，页面能及时得到更新
非响应式方法：通过修改索引值来改变数组中的元素
响应式方法：
1.push() 在数组末尾添加元素，可添加多个
2.pop() 删除数组的最后一个元素
3.shift() 删除数组的第一个元素
4.unshift() 在数组最前面添加元素，可添加多个
5.splice()
删除元素：第一个参数传开始删除的位置，第二个参数传要删除元素的个数，如果没有传，就删除后面所有元素
替换元素：第一个参数传开始替换的位置，第二个参数传要替换的个数，后面是用于替换前面的元素
插入元素：第一个参数传开始插入的位置，第二个参数传0，后面是用于插入的元素
6.sort() 排序
7.reverse() 反转，数组元素的顺序倒过来

代码示例：

<!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>
</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();
      }
    }
  })
</script>
</body>
</html>

标签：letters,数组,删除,哪些,元素,响应,参数,splice
来源： https://blog.csdn.net/YINZHE__/article/details/116851152

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

数组中有哪些方法是响应式的