快捷導(dǎo)航

Vue指令之v-for的使用說明

更新時(shí)間：2022年04月08日 11:22:53 作者：北海之靈

這篇文章主要介紹了Vue指令之v-for的使用說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue v-for的使用

1.迭代普通數(shù)組

在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>

2.迭代對(duì)象數(shù)組

在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>

3.迭代對(duì)象

在data中定義對(duì)象

data:{
? ? ? user:{
? ? ? ? id:1,
? ? ? ? name:'托尼.賈',
? ? ? ? gender:'男'
? ? ? }
}

在html中使用 v-for 指令渲染

<p v-for="(val,key) in user">--鍵是--{{key}}--值是--{{val}}</p>

4.迭代數(shù)字

<!-- 注意：如果使用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>

截圖：

v-for的最佳使用技巧

在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)大。

1.始終在v-for循環(huán)中使用key

建議在遍歷數(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>

2.不要在循環(huán)中使用v-if

一個(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>

3.使用計(jì)算屬性或方法來處理數(shù)據(jù)后再做數(shù)據(jù)遍歷

為避免上述問題，我們應(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>

4.在一個(gè)范圍內(nèi)循環(huán)

盡管大多數(shù)情況下，v-for 用于遍歷數(shù)組或?qū)ο螅谀承┣闆r下，我們肯定只希望循環(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>

5.在循環(huán)中訪問項(xiàng)目的索引

除了遍歷數(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>

6.遍歷一個(gè)對(duì)象

我們也可以使用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>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: