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