列表渲染

原文： https://cn.vuejs.org/v2/guide/list.html#v-for-with-v-if

用v-for把一個數組對應爲一組元素

---

` v-for `指令須要會用`item in items`形式的特殊語法，`items`是元數據數組而且`item`是數組元素迭代的別名。
在`v-for`塊中，咱們擁有對父做用域屬性的徹底訪問權限。`v-for`還支持一個可選的第二個參數爲當前項的索引。

<ul id="example-2">
    <li v-for="(item, index) in items">
    </li>
</ul>

複製代碼

var example2 = new Vue({
    el: '#example-2',
    data: {
        parentMessage: 'Parent',
        items:[
            { message: 'Foo' },
            { message: 'Bar' }
        ]
    }
})

複製代碼

也能夠用of代替in做爲分隔符，由於它是最接近JavaScript迭代器的語法：

<div v-for="item of items"> </div>

對象的屬性迭代 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
    }
  }
})

複製代碼

• 提供第二個的參數爲鍵名：

<div v-for="(value, key) in object"></div>
複製代碼

• 提供第三個參數爲索引

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

提示： 在遍歷對象時，是按object.keys()的結果遍歷，可是不能保證 它的結果在不一樣的JavaScript引擎下是一致的

key

當vue.js正在更新已渲染過的元素列表時，它默認用就地複用策略。若是數據項的順序被改變，Vue將不會移動DOM來匹配數據項的順序，而是簡單複用此處每一個元素，而且確保它在特定索引下顯示已被渲染過的每一個元素。這個相似Vue 1.x的track-by="$index"
這個默認的模式是高效的，可是隻適用於不依賴組價狀態或臨時DOM狀態（例如：表單輸入值）的列表渲染輸出
爲了給Vue一個提示，以便它能跟蹤每一個節點的身份，從而重用和從新排序現有元素，於是須要沒每項提供一個惟一key屬性。理想的key值是每項都有的惟一id。 這個特殊的屬性至關於Vue 1.x的track-by，但它的工做方式相似於一個屬性，因此須要用v-bind來綁定動態值：

<div v-for="item in items" :key="item.id">

建議儘量在使用v-for 時提供key ，除非遍歷輸出的DOM內容很是簡單，或者是能夠依賴默認行爲以獲取性能上的提高。
由於它是Vue識別節點的一個通用機制，key並不與v-for特別關聯，key還具備其餘用途

---

不要使用對象或數組之類的給原始類型值做爲v-for的key。用字符串或數類型的值取而代之。

---

數組更新檢測

變異方法

vue包含一組觀察數組的變異方法，因此他們也將會觸發視圖更新。

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

替換數組

變異方法，會改變被這些方法調用的原始狐族。相比之下，也有非變異方法，例如：filter(),concat()和slice()。這些不會改變原始數組，但老是返回一個新的數組。當使用非變異方法時，能夠用心數組替換舊數組

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

複製代碼

注意事項

因爲JavaScript的限制，vue不能檢測如下變更的數組： 1. 利用索引值直接設置一個項時，例如：vm.items[indexOfItem] = newValue 2. 修改數組的長度時，例如： vm.items.length = newLength

v-forwithv-if

---

當它們處於同一節點，v-for的優先級比v-if更高，這意味着v-if將分別運行於每一個v-for循環中。

一個組件的v-for

---

2.2.0+的版本里，當在組件中使用v-for 時，key如今是必須的

<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id">
  </my-component>

複製代碼

不自動將 item 注入到組件裏的緣由是，這會使得組件與 v-for 的運做緊密耦合。明確組件數據的來源可以使組件在其餘場合重複使用。

下面是一個簡單的TODOlist的完整例子

<div id="todo-list-example">
    <form v-on:submit.prevent="addNewTodo">
        <label for="new-todo">Add a todo</label>
        <input
        v-model="newTodoText"
        id="new-todo"
        placeholder="E.g. Feed the cat"
        >
        <button>Add</button>
    </form>
    <ul>
        <li
        is="todo-item"
        v-for="(todo, index) in todos"
        v-bind:key="todo.id"
        v-bind:title="todo.title"
        v-on:remove="todos.splice(index, 1)"
        ></li>
    </ul>
    </div>

複製代碼

注意這裏的is="todo-item" 屬性。這種作法在使用 DOM 模板時是十分必要的，由於在<ul>元素內只有 <li>元素會被看做有效內容。這樣作實現的效果與 <todo-item> 相同，可是能夠避開一些潛在的瀏覽器解析錯誤。查看 DOM 模板解析說明 來了解更多信息。

Vue.component('todo-item', {
  template: '\ <li>\ {{ title }}\ <button v-on:click="$emit(\'remove\')">Remove</button>\ </li>\ ',
  props: ['title']
})

new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      {
        id: 1,
        title: 'Do the dishes',
      },
      {
        id: 2,
        title: 'Take out the trash',
      },
      {
        id: 3,
        title: 'Mow the lawn'
      }
    ],
    nextTodoId: 4
  },
  methods: {
    addNewTodo: function () {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  }
})

複製代碼