您好,登錄后才能下訂單哦!
這篇文章主要介紹了Vue的指令v-for怎么使用的相關(guān)知識(shí),內(nèi)容詳細(xì)易懂,操作簡(jiǎn)單快捷,具有一定借鑒價(jià)值,相信大家閱讀完這篇Vue的指令v-for怎么使用文章都會(huì)有所收獲,下面我們一起來看看吧。
在data中定義普通數(shù)組
data:{ list:[1,2,3,4,5,6] }
在html中使用 v-for 指令渲染
<p v-for="(item,i) in list">--索引值--{{i}} --每一項(xiàng)--{{item}}</p>
在data中定義對(duì)象數(shù)組
data:{ list:[1,2,3,4,5,6], listObj:[ {id:1, name:'zs1'}, {id:2, name:'zs2'}, {id:3, name:'zs3'}, {id:4, name:'zs4'}, {id:5, name:'zs5'}, {id:6, name:'zs6'}, ] }
在html中使用 v-for 指令渲染
<p v-for="(user,i) in listObj">--id--{{user.id}} --姓名--{{user.name}}</p>
在data中定義對(duì)象
data:{ user:{ id:1, name:'托尼.賈', gender:'男' } }
在html中使用 v-for 指令渲染
<p v-for="(val,key) in user">--鍵是--{{key}}--值是--{{val}}</p>
<!-- 注意:如果使用v-for迭代數(shù)字的話,前面 count 的值從 1 開始--> <p v-for="count in 10">這是第{{count}}次循環(huán)</p>
完整代碼:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id='app'> <!--v-for循環(huán)普通數(shù)組--> <p v-for="(item,i) in list">--索引值--{{i}} --每一項(xiàng)--{{item}}</p> <br/> <!--v-for循環(huán)對(duì)象數(shù)組--> <p v-for="(user,i) in listObj">--id--{{user.id}} --姓名--{{user.name}}</p> <br/> <!--注意,在遍歷對(duì)象的鍵值對(duì)的時(shí)候,除了有 val 和 key,在第三個(gè)位置還有一個(gè)索引--> <p v-for="(val,key) in user">--鍵是--{{key}} --值是--{{val}}</p> <br/> <!-- in 后面我們放過數(shù)組、對(duì)象數(shù)組、對(duì)象,還可以放數(shù)字--> <!-- 注意:如果使用v-for迭代數(shù)字的話,前面 count 的值從 1 開始--> <p v-for="count in 10">這是第{{count}}次循環(huán)</p> </div> </body> <script src="vue.min.js"></script> <script> var vm = new Vue({ el:'#app', data:{ list:[1,2,3,4,5,6], listObj:[ {id:1, name:'zs1'}, {id:2, name:'zs2'}, {id:3, name:'zs3'}, {id:4, name:'zs4'}, {id:5, name:'zs5'}, {id:6, name:'zs6'}, ], user:{ id:1, name:'托尼.賈', gender:'男' } } }); </script> </html>
截圖:
在vuejs中,v-for 的使用是比較常見的,它允許您在模板代碼中編寫for循環(huán)。那么在使用v-for的時(shí)候,可曾思考過使用這個(gè)指令的一些技巧嗎?
在介紹它的使用技巧之前,我先介紹下它的基本用法吧,在vue中v-for可以遍歷數(shù)組、對(duì)象、字符串,但是用的最多的還是遍歷數(shù)組,基本方法如下:
<div id="app"> <ul> <li v-for='item in list'> {{ item.name }} </li> </ul> </div>
可能有些初學(xué)者在使用的過程中,不會(huì)考慮太多的使用技巧,直接遍歷定義在data中的數(shù)據(jù),其實(shí)vue在設(shè)計(jì)的初衷,也考慮到了這個(gè)問題,如果頻繁使用data中的數(shù)據(jù),可能會(huì)造成一些性能上的消耗,是相當(dāng)不友好的。
在本篇文章中,我將介紹六種方法來使你的 v-for 代碼更加精確,可預(yù)測(cè)和強(qiáng)大。
建議在遍歷數(shù)據(jù)的時(shí)候,都盡可能的加上key,設(shè)置一個(gè)惟一的鍵屬性,它可以確保組件以您期望的方式工作。有些時(shí)候,可能使用索引index也可以,但是在一些特定的場(chǎng)景下,比如多場(chǎng)景登錄下,如果不使用key來標(biāo)識(shí)當(dāng)前使用的登錄方式,那么可能會(huì)造成數(shù)據(jù)的紊亂問題,如果數(shù)據(jù)量比較大, 頁面的數(shù)據(jù)更新時(shí)會(huì)造成渲染數(shù)據(jù)消耗很大的性能甚至出現(xiàn)不可預(yù)測(cè)的bug,如果我們對(duì)每個(gè)元素都有唯一的鍵引用,那么我們就可以更好地準(zhǔn)確地預(yù)測(cè)DOM將如何操作,就可以避免很多不必要的問題出現(xiàn)。
<div id="app"> <ul> <li v-for='item in list' :key='item.id'> {{ item.name }} </li> </ul> </div>
一個(gè)超級(jí)常見的錯(cuò)誤是使用 v-if 來過濾 v-for 循環(huán)的數(shù)據(jù)。Vuejs優(yōu)先考慮 v-for 而不是 v-if,這意味著組件將循環(huán)遍歷每個(gè)元素,然后檢查 v-if 條件以確定是否應(yīng)渲染。因此,實(shí)際上,無論條件是什么,都將遍歷數(shù)組。盡管這看起來很直觀,但它會(huì)導(dǎo)致一個(gè)巨大的性能問題
/*千萬不要這樣寫,切記切記*/ <div id="app"> <ul> <li v-for='item in list' :key='item.id' v-if="item.price<50" > {{ item.name }} </li> </ul> </div>
為避免上述問題,我們應(yīng)該在遍歷模板中的數(shù)據(jù)之前對(duì)其進(jìn)行過濾。有兩種非常相似的方法
使用計(jì)算屬性
使用過濾方法
首先,我們只需要設(shè)置一個(gè)計(jì)算屬性,為了獲得與之前的v-if相同的功能,代碼應(yīng)如下所示。
<div id="app"> <ul> <li v-for='item in underPrice' :key='item.id' > {{ item.name }} </li> </ul> </div>
<script> export default { data () { return { list: [] } }, computed: { underPrice: function () { return this.list.filter(item=> item.price < 50) } } } </script>
計(jì)算屬性是作為屬性使用的,并不是方法。使用computed,可以將數(shù)據(jù)做緩存處理,在每次渲染數(shù)據(jù)的時(shí)候,會(huì)優(yōu)先在緩存在找該數(shù)據(jù),如果有了直接從緩存中取出渲染,如果沒有的話再重新獲取。這樣也大大的提高了性能。
或者可以使用方式來進(jìn)行變量的篩選以及處理再做遍歷
<div id="app"> <ul> <li v-for='item in underPriceHandle(50)' :key='item.id' > {{ item.name }} </li> </ul> </div>
<script> export default { data () { return { list: [] } }, methods: { underPriceHandle: function (price) { return this.list.filter(item=> item.price < price) } } } </script>
盡管大多數(shù)情況下,v-for 用于遍歷數(shù)組或?qū)ο?,但在某些情況下,我們肯定只希望循環(huán)執(zhí)行一定次數(shù)。
例如,假設(shè)我們正在為在線商店創(chuàng)建一個(gè)分頁系統(tǒng),而我們只希望每頁顯示10個(gè)產(chǎn)品。使用一個(gè)變量來跟蹤當(dāng)前的頁碼,我們可以像這樣處理分頁。
<ul> <li v-for='index in 10' :key='index'> {{ books[page * 10 + index] }} </li> </ul>
除了遍歷數(shù)組和訪問每個(gè)元素之外,我們還可以跟蹤每個(gè)項(xiàng)的索引。
為此,我們必須在項(xiàng)目后添加一個(gè)索引值,它非常簡(jiǎn)單,可用于分頁,顯示列表索引,顯示排名等。
<ul> <li v-for='(item, index) in products' :key='item.id' > {{ index }}----{{ item.name }} </li> </ul>
我們也可以使用v-for輕松地遍歷對(duì)象的鍵值對(duì)。
與訪問元素的索引類似,我們必須向循環(huán)中添加另一個(gè)值。如果我們用一個(gè)參數(shù)遍歷一個(gè)對(duì)象,我們將遍歷所有的項(xiàng)。
如果我們添加另一個(gè)參數(shù),我們將獲得items 和 key,如果添加第三個(gè),我們還可以訪問 v-for 循環(huán)的索引。
<ul> <li v-for='(list, index) in lists' :key='list.id' > <span v-for='(item, key, index) in list' :key='key'> {{ item }} </span> </li> </ul>
關(guān)于“Vue的指令v-for怎么使用”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對(duì)“Vue的指令v-for怎么使用”知識(shí)都有一定的了解,大家如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。