Vue.JS入門(mén)教程之列表渲染
你可以使用 v-repeat 指令來(lái)基于 ViewModel 上的對(duì)象數(shù)組渲染列表。對(duì)于數(shù)組中的每個(gè)對(duì)象,該指令將創(chuàng)建一個(gè)以該對(duì)象作為其 $data 對(duì)象的子 Vue 實(shí)例。這些子實(shí)例繼承父實(shí)例的數(shù)據(jù)作用域,因此在重復(fù)的模板元素中你既可以訪問(wèn)子實(shí)例的屬性,也可以訪問(wèn)父實(shí)例的屬性。此外,你還可以通過(guò) $index 屬性來(lái)獲取當(dāng)前實(shí)例對(duì)應(yīng)的數(shù)組索引。
<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' } ] } })
查看一下效果,應(yīng)該很容易得到結(jié)果
塊級(jí)重復(fù)
有時(shí)我們可能需要重復(fù)一個(gè)包含多個(gè)節(jié)點(diǎn)的塊,這時(shí)可以用 <template> 標(biāo)簽包裹這個(gè)塊。這里的 <template> 標(biāo)簽只起到語(yǔ)義上的包裹作用,其本身不會(huì)被渲染出來(lái)。例如:
<ul> <template v-repeat="list"> <li>{{msg}}</li> <li class="divider"></li> </template> </ul>
簡(jiǎn)單值數(shù)組
簡(jiǎn)單值 (primitive value) 即字符串、數(shù)字、boolean 等并非對(duì)象的值。對(duì)于包含簡(jiǎn)單值的數(shù)組,你可用 $value 直接訪問(wèn)值:
<ul id="tags"> <li v-repeat="tags"> {{$value}} </li> </ul>
new Vue({ el: '#tags', data: { tags: ['JavaScript', 'MVVM', 'Vue.js'] } })
使用別名
有時(shí)我們可能想要更明確地訪問(wèn)當(dāng)前作用域的變量而不是隱式地回退到父作用域。你可以通過(guò)提供一個(gè)參數(shù)給 v-repeat 指令并用它作為將被迭代項(xiàng)的別名:
<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 內(nèi)部對(duì)被觀察數(shù)組的變異方法 (mutating methods,包括 push(), pop(), shift(), unshift(), splice(), sort() 和 reverse()) 進(jìn)行了攔截,因此調(diào)用這些方法也將自動(dòng)觸發(fā)視圖更新。
// 以下操作會(huì)觸發(fā) DOM 更新 demo.items.unshift({ childMsg: 'Baz' }) demo.items.pop()
下面是一個(gè)演示的例子,點(diǎn)擊按鈕的時(shí)候數(shù)據(jù)項(xiàng)會(huì)被移除
<!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="測(cè)試" onclick="myClick();"> <script> var tag = new Vue({ el: '#tags', data: { tags: ['標(biāo)簽一', '標(biāo)簽二', '標(biāo)簽三'] } }); function myClick(){ tag.tags.pop(); } </script> </body> </html>
擴(kuò)展方法
Vue.js 給被觀察數(shù)組添加了兩個(gè)便捷方法:$set() 和 $remove() 。
你應(yīng)該避免直接通過(guò)索引來(lái)設(shè)置數(shù)據(jù)綁定數(shù)組中的元素,比如 demo.items[0] = {},因?yàn)檫@些改動(dòng)是無(wú)法被 Vue.js 偵測(cè)到的。你應(yīng)該使用擴(kuò)展的 $set() 方法:
// 不要用 `demo.items[0] = ...` demo.items.$set(0, { childMsg: 'Changed!'})
$remove() 只是 splice()方法的語(yǔ)法糖。它將移除給定索引處的元素。當(dāng)參數(shù)不是數(shù)值時(shí),$remove() 將在數(shù)組中搜索該值并刪除第一個(gè)發(fā)現(xiàn)的對(duì)應(yīng)元素。
// 刪除索引為 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="測(cè)試" onclick="myClick();"> <script> var tag = new Vue({ el: '#tags', data: { tags: ['標(biāo)簽一', '標(biāo)簽二', '標(biāo)簽三'] } }); function myClick(){ //tag.tags.pop(); //tag.tags[0] = '修改后的內(nèi)容不生效'; tag.tags.$set(0, '修改后的內(nèi)容生效'); tag.tags.$remove(1); } </script> </body> </html>
替換數(shù)組
當(dāng)你使用非變異方法,比如filter(), concat() 或 slice(),返回的數(shù)組將是一個(gè)不同的實(shí)例。在此情況下,你可以用新數(shù)組替換舊的數(shù)組:
demo.items = demo.items.filter(function (item) { return item.childMsg.match(/Hello/) })
你可能會(huì)認(rèn)為這將導(dǎo)致整個(gè)列表的 DOM 被銷(xiāo)毀并重新渲染。但別擔(dān)心,Vue.js 能夠識(shí)別一個(gè)數(shù)組元素是否已有關(guān)聯(lián)的 Vue 實(shí)例, 并盡可能地進(jìn)行有效復(fù)用。
使用track-by(vue中track-by屬性)
在某些情況下,你可能需要以全新的對(duì)象(比如 API 調(diào)用所返回的對(duì)象)去替換數(shù)組。如果你的每一個(gè)數(shù)據(jù)對(duì)象都有一個(gè)唯一的 id 屬性,那么你可以使用 track-by 特性參數(shù)給 Vue.js 一個(gè)提示,這樣它就可以復(fù)用已有的具有相同 id 的 Vue 實(shí)例和 DOM 節(jié)點(diǎn)。
例如:你的數(shù)據(jù)是這個(gè)樣子的
{ items: [ { _uid: '88f869d', ... }, { _uid: '7496c10', ... } ] }
那么你可以像這樣給出提示:
<div v-repeat="items" track-by="_uid"> <!-- content --> </div>
在替換 items 數(shù)組時(shí),Vue.js 如果碰到一個(gè)有 _uid: '88f869d' 的新對(duì)象,它就會(huì)知道可以直接復(fù)用有同樣 _uid 的已有實(shí)例。在使用全新數(shù)據(jù)重新渲染大型 v-repeat 列表時(shí),合理使用 track-by 能極大地提升性能。
遍歷對(duì)象
你也可以使用 v-repeat 遍歷一個(gè)對(duì)象的所有屬性。每個(gè)重復(fù)的實(shí)例會(huì)有一個(gè)特殊的屬性 $key。對(duì)于簡(jiǎn)單值,你也可以象訪問(wèn)數(shù)組中的簡(jiǎn)單值那樣使用 $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 中,對(duì)于給對(duì)象添加一個(gè)新屬性,或是從對(duì)象中刪除一個(gè)屬性時(shí),沒(méi)有機(jī)制可以檢測(cè)到這兩種情況。針對(duì)這個(gè)問(wèn)題,Vue.js 中的被觀察對(duì)象會(huì)被添加三個(gè)擴(kuò)展方法: $add(key, value), $set(key, value) 和 $delete(key)。這些方法可以被用于在添加 / 刪除觀察對(duì)象的屬性時(shí)觸發(fā)對(duì)應(yīng)的視圖更新。方法 $add 和 $set 的不同之處在于當(dāng)指定的鍵已經(jīng)在對(duì)象中存在時(shí) $add 將提前返回,所以調(diào)用 obj.$add(key) 并不會(huì)以 undefined 覆蓋已有的值。
迭代值域
v-repeat 也可以接受一個(gè)整數(shù)。在這種情況下,它將重復(fù)顯示一個(gè)模板多次。下面的例子將迭代3次。
<div id="range"> <div v-repeat="val">Hi! {{$index}}</div> </div>
new Vue({ el: '#range', data: { val: 3 } });
數(shù)組過(guò)濾器
有時(shí)候我們只需要顯示一個(gè)數(shù)組的過(guò)濾或排序過(guò)的版本,而不需要實(shí)際改變或重置原始數(shù)據(jù)。Vue 提供了兩個(gè)內(nèi)置的過(guò)濾器來(lái)簡(jiǎn)化此類需求: filterBy 和 orderBy。
<input v-model="searchText"> <ul> <li v-repeat="users | filterBy searchText">{{name}}</li> </ul>
本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》,歡迎大家學(xué)習(xí)閱讀。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
基于VUE移動(dòng)音樂(lè)WEBAPP跨域請(qǐng)求失敗的解決方法
這篇文章主要介紹了基于VUE移動(dòng)音樂(lè)WEBAPP跨域請(qǐng)求失敗的解決方法,需要的朋友可以參考下2018-01-01詳解vue中點(diǎn)擊空白處隱藏div的實(shí)現(xiàn)(用指令實(shí)現(xiàn))
本篇文章主要介紹了詳解vue中點(diǎn)擊空白處隱藏div的實(shí)現(xiàn)(用指令實(shí)現(xiàn)),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04vue element-ui v-for循環(huán)el-upload上傳圖片 動(dòng)態(tài)添加、刪除方式
這篇文章主要介紹了vue element-ui v-for循環(huán)el-upload上傳圖片 動(dòng)態(tài)添加、刪除方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vue vantUI實(shí)現(xiàn)文件(圖片、文檔、視頻、音頻)上傳(多文件)
這篇文章主要介紹了vue vantUI實(shí)現(xiàn)文件(圖片、文檔、視頻、音頻)上傳(多文件),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10vue在.js文件中引入store和router問(wèn)題
這篇文章主要介紹了vue在.js文件中引入store和router問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03ElementUI中el-dropdown-item點(diǎn)擊事件無(wú)效問(wèn)題
這篇文章主要介紹了ElementUI中el-dropdown-item點(diǎn)擊事件無(wú)效問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04vue2.0開(kāi)發(fā)實(shí)踐總結(jié)之疑難篇
這篇文章主要為大家總結(jié)了vue2.0開(kāi)發(fā)實(shí)踐的疑難,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12