你可以使用 v-repeat 指令來基於 ViewModel 上的物件陣列渲染列表。對於數組中的每個對象,該指令將建立一個以該對像作為其 $data 對象的子 Vue 實例。這些子實例繼承父實例的資料作用域,因此在重複的範本元素中你既可以存取子實例的屬性,也可以存取父實例的屬性。此外,你也可以透過 $index 屬性來取得目前實例對應的陣列索引。
<ul id="demo"> <li v-repeat="items" class="item-{{$index}}"> {{$index}} - {{parentMsg}} {{childMsg}} </li> </ul>
var demo = new Vue({ el: '#demo', data: { parentMsg: 'Hello', items: [ { childMsg: 'Foo' }, { childMsg: 'Bar' } ] } })
查看一下效果,應該很容易得到結果
塊級重複
有時我們可能需要重複一個包含多個節點的塊,這時可以用 標籤包裹這個塊。這裡的 標籤只起到語意上的包裹作用,本身不會被渲染出來。例如:
<ul> <template v-repeat="list"> <li>{{msg}}</li> <li class="divider"></li> </template> </ul>
簡單值陣列
簡單值 (primitive value) 即字串、數字、boolean 等並非物件的值。對於包含簡單值的數組,你可用$value 直接存取值:
<ul id="tags"> <li v-repeat="tags"> {{$value}} </li> </ul>
new Vue({ el: '#tags', data: { tags: ['JavaScript', 'MVVM', 'Vue.js'] } })
使用別名
有時我們可能想要更明確地存取
使用別名
的隱名符號父作用域。你可以透過提供一個參數給v-repeat 指令並用它作為將被迭代項的別名:
<ul id="users"> <li v-repeat="user : users"> {{user.name}} - {{user.email}} </li> </ul>
var users = new Vue({ el: '#users', data: { users: [ { name: 'Foo Bar', email: 'foo@bar.com' }, { name: 'John Doh', email: 'john@doh.com' } ] } });
變異方法
Vue.js包括push(), pop(), shift(), unshift(), splice(), sort() 和reverse()) 進行了攔截,因此呼叫這些方法也將自動觸發視圖更新。// 以下操作会触发 DOM 更新 demo.items.unshift({ childMsg: 'Baz' }) demo.items.pop()下面是一個示範的例子,點擊按鈕的時候資料項目會移除
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script> </head> <body> <ul id="tags"> <li v-repeat="tags"> {{$value}} </li> </ul> <input type="button" value="测试" onclick="myClick();"> <script> var tag = new Vue({ el: '#tags', data: { tags: ['标签一', '标签二', '标签三'] } }); function myClick(){ tag.tags.pop(); } </script> </body> </html>
你應該避免直接透過索引來設定資料綁定數組中的元素,例如 demo.items[0] = {},因為這些改動是無法被 Vue.js 偵測到的。你應該使用擴充的 $set() 方法:
// 不要用 `demo.items[0] = ...` demo.items.$set(0, { childMsg: 'Changed!'})
// 删除索引为 0 的元素。 demo.items.$remove(0)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script> </head> <body> <ul id="tags"> <li v-repeat="tags"> {{$value}} </li> </ul> <input type="button" value="测试" onclick="myClick();"> <script> var tag = new Vue({ el: '#tags', data: { tags: ['标签一', '标签二', '标签三'] } }); function myClick(){ //tag.tags.pop(); //tag.tags[0] = '修改后的内容不生效'; tag.tags.$set(0, '修改后的内容生效'); tag.tags.$remove(1); } </script> </body> </html>
當你使用非變異方法,例如filter(), concat() 或 slice(),傳回的陣列將是一個不同的實例。在此情況下,你可以用新陣列取代舊的陣列:
demo.items = demo.items.filter(function (item) { return item.childMsg.match(/Hello/) })
你可能會認為這將導致整個清單的 DOM 被銷毀並重新渲染。但別擔心,Vue.js 能夠辨識一個陣列元素是否已有關聯的 Vue 實例, 並盡可能地進行有效重複使用。
使用track-by(vue中track-by屬性)
在某些情況下,你可能需要以全新的物件(例如 API 呼叫所傳回的物件)去替換陣列。如果你的每一個資料物件都有一個唯一的 id 屬性,那麼你可以使用 track-by 特性參數給 Vue.js 一個提示,這樣它就可以重複使用已有的具有相同 id 的 Vue 實例和 DOM 節點。例如:你的資料是這個樣子的
{ items: [ { _uid: '88f869d', ... }, { _uid: '7496c10', ... } ] }
那麼你可以像這樣給予提示:
<div v-repeat="items" track-by="_uid"> <!-- content --> </div>
_m裡
'88f869d' 的新對象,它就會知道可以直接重複使用有同樣_uid 的已有實例。在使用全新資料重新渲染大型 v-repeat 清單時,合理使用 track-by 能大幅提升效能。
遍歷物件
你也可以使用 v-repeat 遍歷一個物件的所有屬性。每個重複的實例會有一個特殊的屬性 $key。對於簡單值,你也可以像存取數組中的簡單值那樣使用 $value 屬性。<ul id="repeat-object"> <li v-repeat="primitiveValues">{{$key}} : {{$value}}</li> <li>===</li> <li v-repeat="objectValues">{{$key}} : {{msg}}</li> </ul>
new Vue({ el: '#repeat-object', data: { primitiveValues: { FirstName: 'John', LastName: 'Doe', Age: 30 }, objectValues: { one: { msg: 'Hello' }, two: { msg: 'Bye' } } } });
在 ECMAScript 5 中,對於新增一個屬性,或為物件中刪除一個屬性時,沒有機制可以偵測到這兩種情況。針對這個問題,Vue.js 中的被觀察對象會被加入三個擴充方法: $add(key, value), $set(key, value) 和 $delete(key)。這些方法可以用於在新增 / 刪除觀察對象的屬性時觸發對應的視圖更新。方法 $add 和 $set 的不同之處在於當指定的鍵已經在物件中存在時 $add 將提前返回,所以調用 obj.$add(key) 並不會以 undefined 覆蓋已有的值。
迭代值域
v-repeat 也可以接受一個整數。在這種情況下,它將重複顯示一個模板多次。下面的例子將會迭代3次。<div id="range"> <div v-repeat="val">Hi! {{$index}}</div> </div>
new Vue({ el: '#range', data: { val: 3 } });
數組過濾器
有時我們只需要顯示一個陣列的過濾或排序的版本,而不需要實際重置或原始資料。 Vue 提供了兩個內建的過濾器來簡化此類需求: filterBy 和 orderBy。 🎜<input v-model="searchText"> <ul> <li v-repeat="users | filterBy searchText">{{name}}</li> </ul>🎜 🎜
以上就是本文的全部內容,希望對大家的學習有幫助