程序员社区

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

什么是响应式?
当数据发生改变时,页面能及时得到更新
非响应式方法:通过修改索引值来改变数组中的元素
响应式方法
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>

赞(0) 打赏
未经允许不得转载:IDEA激活码 » 数组中有哪些方法是响应式的

一个分享Java & Python知识的社区