本文主要給大家介紹了關于Vue.js列表渲染的相關資料，分享出來給大家參考學習，下面來看看詳細的介紹：

v-for

可以使用 v-for 指令基于一個數組渲染一個列表。這個指令使用特殊的語法，形式為item in items，items 是數據數組，item 是當前數組元素的別名：

示例：

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

var example1 = new Vue({ el: '#example-1', data: { items: [  { message: 'Foo' },  { message: 'Bar' } ] }})

在 v-for 塊內我們能完全訪問父組件作用域內的屬性，另有一個特殊變量 $index，正如你猜到的，它是當前數組元素的索引：

<ul id="example-2"> <li v-for="item in items"> {{ parentMessage }} - {{ $index }} - {{ item.message }} </li></ul>

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

另外，你可以為索引指定一個別名（如果 v-for 用于一個對象，則可以為對象的鍵指定一個別名）：

<div v-for="(index, item) in items"> {{ index }} {{ item.message }}</div>

從 1.0.17 開始可以使用 of 分隔符，更接近 JavaScript 遍歷器語法：

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

template v-for

類似于 template v-if，也可以將 v-for 用在 <template> 標簽上，以渲染一個包含多個元素的塊。例如：

<ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider"></li> </template></ul>

數組變動檢測

變異方法

Vue.js 包裝了被觀察數組的變異方法，故它們能觸發視圖更新。

被包裝的方法有：

你可以打開瀏覽器的控制臺，用這些方法修改上例的 items 數組。例如：example1.items.push({ message: 'Baz' }) 。

替換數組

變異方法，如名字所示，修改了原始數組。相比之下，也有非變異方法，如 filter() , concat() 和 slice() ，不會修改原始數組而是返回一個新數組。在使用非變異方法時，可以直接用新數組替換舊數組：

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

可能你覺得這將導致 Vue.js 棄用已有 DOM 并重新渲染整個列表——幸運的是并非如此。 Vue.js 實現了一些啟發算法，以最大化復用 DOM 元素，因而用另一個數組替換數組是一個非常高效的操作。