Vue 数组的变异方法和替换数组

变异方法和替换数组


1. 变异方法(修改原有数据)

  • push()
    接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度

  • pop()
    从数组末尾移除最后一项,减少数组的length值,然后返回移除的项

  • shift()
    移除数组中的第一个项并返回该项,同时数组的长度减1

  • unshift()
    在数组前端添加任意个项并返回新数组长度

// 将新项添加到数组起始位置:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
// fruits 将输出:Lemon,Pineapple,Banana,Orange,Apple,Mango
  • splice()
    删除原数组的一部分成员,并可以在被删除的位置添加入新的数组成员
// 移除数组的第三个元素,并在数组第三个位置添加新元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
// 参数1必填,其他参数可选
fruits.splice(2,1,"Lemon","Kiwi");
// fruits 输出结果:Banana,Orange,Lemon,Kiwi,Mango
  • sort()
    调用每个数组项的toString()方法,然后比较得到的字符串排序,返回经过排序之后的数组

  • reverse()
    用于反转数组的顺序,返回经过排序之后的数组

2. 替换数组(生成新的数组)

  • filter()
    创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素
// currentValue 必须。当前元素的值
// index 可选。当前元素的索引值
// arr 可选。当前元素属于的数组对象
// thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined"
.filter(function(currentValue,index,arr), thisValue)
  • concat()
    方法用于连接两个或多个数组。该方法不会改变现有的数组
// 参数arrayX必选。该参数可以是具体的值,也可以是数组对象。可以是任意多个。
.concat(arrayX,arrayX,......,arrayX)
  • slice()
    方法可从已有的数组中返回选定的元素。该方法并不会修改数组,而是返回一个子数组
// 参数1必选,规定开始选取元素的位置;参数2可选,规定结束选取元素的位置
.slice(start,stop)

3. 修改响应式数据

  在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,这时候就需要修改响应式数据。

  Vue.set(vm.items, indexOfItem, newValue)
  vm.$set(vm.items, indexOfItem, newValue)

  ① 参数一表示要处理的数组名称
  ② 参数二表示要处理的数组的索引
  ③ 参数三表示要处理的数组的值

  <div id="app">
    <ul>
      <li v-for='item in list'>{{item}}</li>
    </ul>
    <div>
      <div>{{info.name}}</div>
      <div>{{info.age}}</div>
      <div>{{info.gender}}</div>
    </div>
  </div>
  <script type="text/javascript">
    /*
      动态处理响应式数据
    */
    var vm = new Vue({
      el: '#app',
      data: {
        list: ['apple', 'orange', 'banana'],
        info: {
          name: 'lisi',
          age: 12
        }
      },
    });
    // vm.list[1] = 'lemon';
    // Vue.set(vm.list, 2, 'lemon');
    vm.$set(vm.list, 1, 'lemon');

    // vm.info.gender = 'male';
    vm.$set(vm.info, 'gender', 'female');
  </script>
posted @ 2021-09-27 10:57  一纸年华  阅读(2425)  评论(1编辑  收藏  举报