Vue 数组操作

push / pop / unshift / shift 方法

• push() 在末尾添加元素
• pop() 将数组的最后一个元素移除
• shift() 删除数组的第一个元素

• unshift（）：在数组的第一个元素位置添加一个元素
  请看图：

  
  

sort / reverse 方法

<div id="app">
    <ul>
      <li v-for="person in personArr">
        {{ person }}
      </li>
    </ul>
    <button @click="sortArr">sort</button>      
    <button @click="reverseArr">reverse</button> 
</div>

var app = new Vue({
  el: '#app',
  data: {
    personArr: ['张三', '李四', '王二麻子']
  },
  methods: {  
    sortArr() {                      
      this.personArr.sort(function (a, b) {
        return b.length - a.length    // 为了效果，写的 b.length - a.length，你也可以调换顺序试试
      })
    },
    reverseArr() {
      this.personArr.reverse()
    }
  }
})

看图：

filter：过滤数组中的元素

<div id="app">
    {{ match }}   
</div>

var app = new Vue({
  el: '#app',
  data: {
    studyArr: ['book', 'pen', 'pencil']  
  },
  computed: {
    match() {  
      return this.studyArr.filter(function (value) {   
        return value.match(/oo/)
//选择带有 oo 的单词
      }) 
    }
  }
})

数组中的元素，只有 "book" 才含有 "oo" ，所以返回 "book"。

数组的两个变动 Vue 检测不到：

• 改变数组的指定项
• 改变数组的长度

<div id="app">
    <ul>
      <li v-for="person in personArr">
        {{ person }}
      </li>
    </ul>
    <button @click="changeItem">changeItem</button>      
    <button @click="changeLength">changeLength</button> 
</div> 

var app = new Vue({
  el: '#app',
  data: {
    personArr: ['张三', '李四', '王二麻子']
  },
  methods: {    
    changeItem() {
      this.personArr[1] = 'dongdong'    
// 将数组索引为 1 的元素改成 'dongdong'
    },
    changeLength() {
      this.personArr.length = 100    
// 将数组长度改成 100
    }
  }
})

改变数组的指定项

Vue.set(数组, 索引, 新元素) // 注意 Vue 的首字母大写

改变数组的长度

• 改变数组长度，可以使用多种方法

  
  
  

  数组长度原本是 3，使用了 splice 方法，删除了索引为 1 及以后的元素，并返回被删除的元素。此时，数组长度变成了 1。

  
  
  使用了 push 方法， 向数组中添加了一个新元素。此时数组长度由原来的 3 变成了 4
  也可以使用其他方法改变数组长度，如：pop、unshift、shift 等。