對于v-for指令，以前老是不能理解，經(jīng)常記混，所以特地寫篇筆記來加強下記憶，希望借此能學的更深刻一點

v-for顧名思義就是個for循環(huán)，是vue的一個循環(huán)。在遍歷json字符串的時候有奇佳的效果，感覺就是為他們而造的。

1、數(shù)組

如果給你個數(shù)組，里面放了值你怎么遍歷出來呢。在java中一般用for循環(huán)，再用個i++把整個整個數(shù)組渲染出來，而vue則簡化了這個操作，相當于將item變成一個變量，自動實行item++的操作，就是接口已經(jīng)給你寫好了，你只要把數(shù)組給我就行了。然后自動將數(shù)組里的值賦給item。

data(){return{arr:[8,9,10,11,12,13 ]}} } <p v-for="item in arr">{{item}}</p>

完整的寫法是

<p v-for="(item,i) in arr">數(shù)組里的值是：{{item}} 數(shù)組序號：{{i}} </p>

有數(shù)組的值和數(shù)組的序列號，且序列號是從0開始的。
值得注意的是，一般我們不加括號們也不使用序列號，item默認取的數(shù)組里的值，如果反過來是(i,item)，那么item會變成序列號。

既然數(shù)組是這樣的，那么后面的數(shù)組對象就是在這基礎(chǔ)之上完成了。

2、數(shù)組對象

這個用的最頻繁，最常用

objectArr:[{name:"zs",con:"你好啊,zs"},{name:"ls",con:"你好啊,ls"},{name:"ww",con:"你好啊,ww"},{name:"zl",con:"你好啊,zl"},{name:"lq",con:"你好啊,老鐵"}] <p v-for="(item,i) in objectArr">{{i}}++++++++++{{item.name}} </p>

3、對象

這里循環(huán)的是鍵值對，寫出一個鍵值對，后面的重復渲染

obj:{name:"zs",age:"17",sex:"男",password:"123456"} <p v-for="(value,key) in obj">鍵：{{key}}，年齡：{{value}}</p>

4、數(shù)字

這個最簡單的數(shù)字遍歷循環(huán)，從1到cout依次輸出

<p v-for="count in 8">{{count}}</p>

總結(jié)

以上是生活随笔為你收集整理的v-for指令案例详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。