腳本之家服務器常用軟件

快捷導航

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

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

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

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}} ? --每一項--{{item}}</p>

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

在data中定義對象數(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.迭代對象

在data中定義對象

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}} ? --每一項--{{item}}</p>
? ? <br/>
? ? <!--v-for循環(huán)對象數(shù)組-->
? ? <p v-for="(user,i) in listObj">--id--{{user.id}} ? --姓名--{{user.name}}</p>
? ? <br/>
? ? <!--注意，在遍歷對象的鍵值對的時候，除了有 val 和 key,在第三個位置還有一個索引-->
? ? <p v-for="(val,key) in user">--鍵是--{{key}} ?--值是--{{val}}</p>
? ? <br/>
? ? <!-- in 后面我們放過數(shù)組、對象數(shù)組、對象，還可以放數(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的時候，可曾思考過使用這個指令的一些技巧嗎？

在介紹它的使用技巧之前，我先介紹下它的基本用法吧，在vue中v-for可以遍歷數(shù)組、對象、字符串，但是用的最多的還是遍歷數(shù)組，基本方法如下：

<div id="app">
?? ?<ul>
? <li v-for='item in list'>
? ? {{ item.name }}
? </li>
</ul>
</div>

可能有些初學者在使用的過程中，不會考慮太多的使用技巧，直接遍歷定義在data中的數(shù)據(jù)，其實vue在設計的初衷，也考慮到了這個問題，如果頻繁使用data中的數(shù)據(jù)，可能會造成一些性能上的消耗，是相當不友好的。

在本篇文章中，我將介紹六種方法來使你的 v-for 代碼更加精確，可預測和強大。

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

建議在遍歷數(shù)據(jù)的時候，都盡可能的加上key，設置一個惟一的鍵屬性，它可以確保組件以您期望的方式工作。有些時候，可能使用索引index也可以，但是在一些特定的場景下，比如多場景登錄下，如果不使用key來標識當前使用的登錄方式，那么可能會造成數(shù)據(jù)的紊亂問題，如果數(shù)據(jù)量比較大，頁面的數(shù)據(jù)更新時會造成渲染數(shù)據(jù)消耗很大的性能甚至出現(xiàn)不可預測的bug，如果我們對每個元素都有唯一的鍵引用，那么我們就可以更好地準確地預測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

一個超級常見的錯誤是使用 v-if 來過濾 v-for 循環(huán)的數(shù)據(jù)。Vuejs優(yōu)先考慮 v-for 而不是 v-if,這意味著組件將循環(huán)遍歷每個元素，然后檢查 v-if 條件以確定是否應渲染。因此，實際上，無論條件是什么，都將遍歷數(shù)組。盡管這看起來很直觀，但它會導致一個巨大的性能問題

/*千萬不要這樣寫，切記切記*/
<div id="app">
?? ?<ul>
? <li v-for='item in list'
? ? ? :key='item.id'
? ? ? v-if="item.price<50"
? ? ? >
? ? {{ item.name }}
? </li>
</ul>
</div>

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

為避免上述問題，我們應該在遍歷模板中的數(shù)據(jù)之前對其進行過濾。有兩種非常相似的方法

使用計算屬性
使用過濾方法

首先，我們只需要設置一個計算屬性，為了獲得與之前的v-if相同的功能，代碼應如下所示。

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

計算屬性是作為屬性使用的，并不是方法。使用computed，可以將數(shù)據(jù)做緩存處理，在每次渲染數(shù)據(jù)的時候，會優(yōu)先在緩存在找該數(shù)據(jù)，如果有了直接從緩存中取出渲染，如果沒有的話再重新獲取。這樣也大大的提高了性能。

或者可以使用方式來進行變量的篩選以及處理再做遍歷

<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.在一個范圍內循環(huán)

盡管大多數(shù)情況下，v-for 用于遍歷數(shù)組或對象，但在某些情況下，我們肯定只希望循環(huán)執(zhí)行一定次數(shù)。

例如，假設我們正在為在線商店創(chuàng)建一個分頁系統(tǒng)，而我們只希望每頁顯示10個產(chǎn)品。使用一個變量來跟蹤當前的頁碼，我們可以像這樣處理分頁。

<ul>
? <li v-for='index in 10' :key='index'>
? ? {{ books[page * 10 + index] }}
? </li>
</ul>

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

除了遍歷數(shù)組和訪問每個元素之外，我們還可以跟蹤每個項的索引。

為此，我們必須在項目后添加一個索引值，它非常簡單，可用于分頁，顯示列表索引，顯示排名等。

<ul>
? <li v-for='(item, index) in products' :key='item.id' >
? ?{{ index }}----{{ item.name }}
? </li>
</ul>

6.遍歷一個對象

我們也可以使用v-for輕松地遍歷對象的鍵值對。

與訪問元素的索引類似，我們必須向循環(huán)中添加另一個值。如果我們用一個參數(shù)遍歷一個對象，我們將遍歷所有的項。

如果我們添加另一個參數(shù)，我們將獲得items 和 key，如果添加第三個，我們還可以訪問 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>

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

您可能感興趣的文章: