vue中v-for怎么用

這篇文章將為大家詳細講解有關(guān)vue中v-for怎么用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

用法：1、利用“v-for="(item,i) in list"”循環(huán)普通數(shù)組；2、利用“v-for="(user,i) in list"”循環(huán)數(shù)組對象；3、利用“v-for="(val,key,i) in user"”循環(huán)對象。

本文操作環(huán)境：windows10系統(tǒng)、Vue2.9.6版，DELL G3電腦。

vue中v-for的用法

v-for的幾種應(yīng)用方式:

方式一：v-for循環(huán)普通數(shù)組

//土蛋方法：
<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>

//數(shù)組數(shù)據(jù)部分：
data:{
    list:[1,2,3,4,5,6]
},

方式二：v-for循環(huán)對象數(shù)組

//v-for用法：
<p v-for="(user,i) in list">{{user.id}},{{user.name}},{{i}}</p>

//數(shù)組數(shù)據(jù)部分:
list:[
    {id:1,name:"zs1"},
    {id:2,name:"zs2"},
    {id:3,name:"zs3"},
    {id:4,name:"zs4"},
]

方式三：v-for循環(huán)對象

注意：在遍歷對象身上的鍵值對的時候，除了有 val key，在第三個位置還有一個索引值

//v-for方法
<p v-for="(val,key,i) in user">{{val}},{{key}}</p>


//對象部分：
user：{
    id:1,
    name:"巧克力"
    gender:"萌妹"
}

方式四：v-for迭代數(shù)組

//in后面我們放過 普通數(shù)組 對象數(shù)組 對象 還可以放數(shù)字
//注意：如果使用 v-for 迭代數(shù)字的話，前面的count值從1開始
<p v-for="count in 10">這是第{{count}}次循環(huán)</p>

關(guān)于“vue中v-for怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。