使用v-for指令渲染列表
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>
