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>可能有些初學(xué)者在使用的過程中，不會考慮太多的使用技巧，直接遍歷定義在data中的數(shù)據(jù)，其實vue在設(shè)計的初衷，也考慮到了這個問題，如果頻繁使用data中的數(shù)據(jù)，可能會造成一些性能上的消耗，是相當(dāng)不友好的。
在本篇文章中，我將介紹六種方法來使你的 v-for 代碼更加精確，可預(yù)測和強(qiáng)大。
1.始終在v-for循環(huán)中使用key
建議在遍歷數(shù)據(jù)的時候，都盡可能的加上key，設(shè)置一個惟一的鍵屬性，它可以確保組件以您期望的方式工作。有些時候，可能使用索引index也可以，但是在一些特定的場景下，比如多場景登錄下，如果不使用key來標(biāo)識當(dāng)前使用的登錄方式，那么可能會造成數(shù)據(jù)的紊亂問題，如果數(shù)據(jù)量比較大， 頁面的數(shù)據(jù)更新時會造成渲染數(shù)據(jù)消耗很大的性能甚至出現(xiàn)不可預(yù)測的bug，如果我們對每個元素都有唯一的鍵引用，那么我們就可以更好地準(zhǔn)確地預(yù)測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 條件以確定是否應(yīng)渲染。因此，實際上，無論條件是什么，都將遍歷數(shù)組。盡管這看起來很直觀，但它會導(dǎo)致一個巨大的性能問題
/*千萬不要這樣寫，切記切記*/
<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ù)遍歷
為避免上述問題，我們應(yīng)該在遍歷模板中的數(shù)據(jù)之前對其進(jìn)行過濾。有兩種非常相似的方法
- 使用計算屬性
- 使用過濾方法
首先，我們只需要設(shè)置一個計算屬性，為了獲得與之前的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>計算屬性是作為屬性使用的，并不是方法。使用computed，可以將數(shù)據(jù)做緩存處理，在每次渲染數(shù)據(jù)的時候，會優(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.在一個范圍內(nèi)循環(huán)
盡管大多數(shù)情況下，v-for 用于遍歷數(shù)組或?qū)ο螅谀承┣闆r下，我們肯定只希望循環(huán)執(zhí)行一定次數(shù)。
例如，假設(shè)我們正在為在線商店創(chuàng)建一個分頁系統(tǒng)，而我們只希望每頁顯示10個產(chǎn)品。使用一個變量來跟蹤當(dāng)前的頁碼，我們可以像這樣處理分頁。
<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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了VUE div click無效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
在前端開發(fā)中,我們經(jīng)常遇到根據(jù)用戶輸入動態(tài)生成不同表單項的需求,本文將詳細(xì)講解如何使用?Vue?3?的響應(yīng)式特性,逐步構(gòu)建一個遞歸動態(tài)表單,感興趣的可以了解下2024-12-12
這篇文章主要為大家介紹了vue?element樹形控件實現(xiàn)樹形表格，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要介紹了VUE調(diào)用本地json的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了Nuxt的動態(tài)路由和參數(shù)校驗操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要為大家詳細(xì)介紹了Vue2如何集成Lodop插件實現(xiàn)在線打印功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
這篇文章主要介紹了uniapp中uni-load-more的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
今天學(xué)習(xí) /deep/ 樣式穿透，因為vue3中已經(jīng)使用:deep()取代了/deep/ ，所以直接用:deep()練習(xí)，這篇文章主要介紹了Vue3中樣式滲透:deep()為什么無效,需要的朋友可以參考下2022-11-11
Vue3中數(shù)據(jù)響應(yīng)式原理與高效數(shù)據(jù)操作全解析
這篇文章主要為大家詳細(xì)介紹了Vue3中數(shù)據(jù)響應(yīng)式原理與高效數(shù)據(jù)操作的相關(guān)知識,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-02-02
