溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關vue中v-for怎么用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
用法：1、利用“v-for="(item,i) in list"”循環普通數組；2、利用“v-for="(user,i) in list"”循環數組對象；3、利用“v-for="(val,key,i) in user"”循環對象。
本文操作環境：windows10系統、Vue2.9.6版，DELL G3電腦。
v-for的幾種應用方式:
//土蛋方法：
<p>{{list[0]}}</p>
<p>{{list[1]}}</p>
<p>{{list[2]}}</p>
<p>{{list[3]}}</p>
<p>{{list[4]}}</p>
//v-for方法：
<p v-for="(item,i) in list">{{i}},{{item}}</p>
//數組數據部分：
data:{
list:[1,2,3,4,5,6]
},//v-for用法：
<p v-for="(user,i) in list">{{user.id}},{{user.name}},{{i}}</p>
//數組數據部分:
list:[
{id:1,name:"zs1"},
{id:2,name:"zs2"},
{id:3,name:"zs3"},
{id:4,name:"zs4"},
]注意：在遍歷對象身上的鍵值對的時候，除了有 val key，在第三個位置還有一個索引值
//v-for方法
<p v-for="(val,key,i) in user">{{val}},{{key}}</p>
//對象部分：
user：{
id:1,
name:"巧克力"
gender:"萌妹"
}//in后面我們放過 普通數組 對象數組 對象 還可以放數字
//注意：如果使用 v-for 迭代數字的話，前面的count值從1開始
<p v-for="count in 10">這是第{{count}}次循環</p>關于“vue中v-for怎么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
