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

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

1、數組

如果給你個數組，里面放了值你怎么遍歷出來呢。在java中一般用for循環，再用個i++把整個整個數組渲染出來，而vue則簡化了這個操作，相當于將item變成一個變量，自動實行item++的操作，就是接口已經給你寫好了，你只要把數組給我就行了。然后自動將數組里的值賦給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">數組里的值是：{{item}} 數組序號：{{i}} </p>

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

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

2、數組對象

這個用的最頻繁，最常用

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、對象

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

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

4、數字

這個最簡單的數字遍歷循環，從1到cout依次輸出

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。