使用v-for指令渲染列表
阿新 • • 發佈：2019-04-13
div 遍歷 charset ide style title none 遍歷數組 code 
v-for：對集合或對象進行遍歷；
使用v-for對數組遍歷時：
效果如下：
代碼：
<script> window.onload= () =>{new Vue({ el:‘#two‘, data:{ arr:[11,22,33,44,55,66,77] } }) } </script> <body> <div id="two"> <ul> <li v-for="value in arr">{{value}}</li> </ul> </div> </body>
使用v-for遍歷一個對象時：
<script> window.onload= () =>{new Vue({ el:‘#two‘, data:{ user:{ id:‘01‘, name:‘bob‘ } } }) } </script>
html:
<div id="two">
<ul>
<li v-for="(v,index,k) in user">{{k}}-{{index}}-{{v}}</li>
</ul>
</div>
使用v-for遍歷多個對象的時：
在vue中加入多個對象：
users:[{id:‘01‘,name:‘cidy‘},{id:‘02‘,name:‘bob‘},{id:‘03‘,name:‘lucy‘},{id:‘04‘,name:‘joey‘}]
html:使用v-for進行遍歷：
<li v-for="(v,index) in users" :key="v.id">{{index}}-{{v.id}}-{{v.name}}</li>
使用v-for進行遍歷數組、單個對象以及多個對象總的代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>v-for</title> 6 </head> 7 <script type="text/javascript" src="../js/vue.js" ></script> 8 <script> 9 window.onload= () =>{new Vue({ 10 el:‘#two‘, 11 data:{ 12 // arr:[11,22,33,44,55,66,77], 13 // user:{ 14 // id:‘01‘, 15 // name:‘bob‘ 16 // } 17 users:[{id:‘01‘,name:‘cidy‘},{id:‘02‘,name:‘bob‘},{id:‘03‘,name:‘lucy‘},{id:‘04‘,name:‘joey‘}] 18 19 20 } 21 }) 22 } 23 24 </script> 25 26 <body> 27 <div id="two"> 28 <ul> 29 30 <!--<li v-for="value in arr">{{value}}</li>--> 31 <!--<li v-for="(v,index,k) in user">{{k}}-{{index}}-{{v}}</li>--> 32 33 <li v-for="(v,index) in users" :key="v.id">{{index}}-{{v.id}}-{{v.name}}</li> 34 </ul> 35 36 37 </div> 38 </body> 39 </html>進行遍歷數組，單個對象以及多個對象的代碼.html
使用v-for指令渲染列表