11. VUE 數組操作

變異方法

Vue 包含一組觀察數組的變異方法，所以它們也將會觸發視圖更新。這些方法如下：

push() 添加元素

<ul id="example-1">
 <li v-for="item in items" :key="item.id">{{ item.message }} </li>
</ul>
<script type="text/javascript">
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      {message: 'Foo' },
      {message: 'Bar' }
    ]
  }
});
example1.$data.items.push({message :  'test'});
</script>

pop() 刪除最后一個元素

example1.$data.items.pop();

shift() 刪除第一個元素

example1.$data.items.shift();

unshift() 添加一個元素到數組最前面

example1.$data.items.unshift({message :'hi..'});

splice() 方法用於插入、刪除或替換數組的元素

參數 描述
index   必需。規定從何處添加/刪除元素。該參數是開始插入和（或）刪除的數組元素的下標，必須是數字。
howmany 必需。規定應該刪除多少元素。必須是數字，但可以是 "0"。如果未規定此參數，則刪除從 index 開始到原數組結尾的所有元素。
item1, ..., itemX 可選。要添加到數組的新元素

example1.$data.items.splice(0,1,{message:'splice'});

sort() 排序（升序）

<ul id="example-1">
 <li v-for="item in items" :key="item.id">{{ item }} </li>
</ul>
<script type="text/javascript">
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      2,3,4
    ]
  }
});
example1.$data.items.sort();

reverse() 排序（降序）

example1.$data.items.reverse();

重塑數組

變異方法(mutation method)，顧名思義，會改變被這些方法調用的原始數組。相比之下，也有非變異(non-mutating method)方法，例如： filter(), concat() 和 slice() 。這些不會改變原始數組，但總是返回一個新數組。當使用非變異方法時，可以用新數組替換舊數組：

example1.items = example1.items.filter(function (item) {

  return item.message.match(/Foo/)

})

你可能認為這將導致 Vue 丟棄現有 DOM 並重新渲染整個列表。幸運的是，事實並非如此。 Vue 實現了一些智能啟發式方法來最大化 DOM 元素重用，所以用一個含有相同元素的數組去替換原來的數組是非常高效的操作。

filter() 數組元素過濾

<ul id="example-1">
 <li v-for="n in even()">{{ n }}</li>
</ul>
<script type="text/javascript">
var example1 = new Vue({
 el: '#example-1',
 data: {
  numbers: [ 1, 2, 3, 4, 5 ]
 },
 methods : {
  even : function(){
   return this.numbers.filter(function (number) {
         return number % 2 === 0;
      });
  }
 }
});
</script>

注意事項

由於 JavaScript 的限制， Vue 不能檢測以下變動的數組：

當你利用索引直接設置一個項時，例如： vm.items[indexOfItem] = newValue

當你修改數組的長度時，例如： vm.items.length = newLength

為了解決第一類問題，以下兩種方式都可以實現和 vm.items[indexOfItem] = newValue 相同的效果， 同時也將觸發狀態更新：

// Vue.set

Vue.set(example1.items, indexOfItem, newValue)

例子:

<ul id="example-1">
 <li v-for="item in items" :key="item.id">{{ item.message }} </li>
</ul>
<script type="text/javascript">
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      {message: 'Foo' },
      {message: 'Bar' },
      {message: 'hcoder'}
    ]
  }
});
//example1.items[3] = {message : 'test...'};
Vue.set(example1.items, 3, {message : 'test...'});
</script>

 

轉載：https://blog.csdn.net/qq_36838191/article/details/80849591