Vue v-for

使用v-for把一個數組對應爲一組元素用v-for指令根據一組數組的選項列表進行渲染v-for指令需要

使用item in items形式的特殊語法，items是源數據數組,並且item是數組元素迭代的別名,v-for模

塊中，我們擁有對父作用域屬性的完全訪問限制

<ul>
<li v-for="item in items">
{{item.message}}
</li>

</ul>

var app = new Vue({
el:"#app",
data:{
items:[
{message:"for"},
{message:"bar"},
{message:"yor"}

]

}

v-for還支持一個可選的第二個參數作爲當前項的索引：

<ul>

<li v-for="(item,index) if items">

    {{ parentMessage }} -- {{ index }} -- {{item.message}}

</li>

</ul>

 data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]

輸出結果的格式爲：

parent - 0 - Foo

parent - 1 - Bar

也可以使用of來代替in

一個對象也可以使用v-for

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

輸出：

John

Doe

30

這裏也可以提供第二個參數作爲鍵名：

<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>

也可以提供第三個參數作爲索引值：

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

#key:

當Vue.js用v-for正在更新已經渲染過的元素列表的時候，它默認用就地複用策略

如果數據項發生改變。Vue將不會移動DOM元素來匹配數據項的順序，而是簡單

複用次數每個元素，並確保它在特定索引下顯示已經被渲染過的每個元素。

這個模式是高效的，但是隻是適用於不易來自組件狀態或者臨時DOM狀態的列表

渲染輸出。

爲了讓Vue能追蹤每個節點的身份，從而重用和重新排序現有元素，你需要爲每項

提供一個key屬性，理想的key值是每項都有唯一的id，需要使用v-bind來綁定動態

值。

<div v-for="item in items" v-bind:key="item.id">
  <!-- 內容 -->
</div>

建議儘可能的在使用v-for的時候提供key的值，除非內容特別簡單，或者刻意依賴默認

行爲已獲得性能上的提升

變異方法：

他們會觸發視圖的更新：push()，pop()，shift()，unshift()，splice()，sort()，reverse()

替換數組：

變異方法就是會改變被這些方法調用的原始數組，相比之下也有非變異方法

比如那些返回新的數組的方法：filter()過濾，concat()拼接，slice()切割

這些方法不會改變原數組，但是會返回一個新數組，當使用非變異方法的時候，

可以用新數組替換舊數組

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

並且這個操作是非常高效的

注意：

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

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

2、當你修改數組的長度的時候，比如：vm.items.length = newLength

舉個例子：

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是響應性的
vm.items.length = 2 // 不是響應性的

解決第一類的問題：

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

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

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

解決第二類問題:

vm.items.splice(newLength)