1.v-for循环普通数组
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8 <!--1.导入Vue的包--> 9 <script src=" https://cdn.jsdelivr.net/npm/vue"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 <!-- <p>{{list[0]}}</p> 15 <p>{{list[1]}}</p> 16 <p>{{list[2]}}</p> 17 <p>{{list[3]}}</p> 18 <p>{{list[4]}}</p> --> 19 20 <p v-for="(item,i) in list">索引值：{{i}}---每一项：{{item}}</p> 21 </div> 22 23 24 <script> 25 //创建 Vue 实例，得到 ViewModel 26 var vm = new Vue({ 27 el:'#app', 28 data:{ 29 list:[1,2,3,4,5,6] 30 }, 31 methods:{} 32 }); 33 </script> 34 </body> 35 </html>
2.v-for循环对象数组
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8 <!--1.导入Vue的包--> 9 <script src=" https://cdn.jsdelivr.net/npm/vue"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 <p v-for="(user,i) in list">Id：{{user.id}}---名字：{{user.name}}---索引：{{i}}</p> 15 </div> 16 17 18 <script> 19 //创建 Vue 实例，得到 ViewModel 20 var vm = new Vue({ 21 el:'#app', 22 data:{ 23 list:[ 24 {id:1,name:'zs1'}, 25 {id:2,name:'zs2'}, 26 {id:3,name:'zs3'}, 27 {id:4,name:'zs4'} 28 ] 29 }, 30 methods:{} 31 }); 32 </script> 33 </body> 34 </html>
3.v-for循环对象
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8 <!--1.导入Vue的包--> 9 <script src=" https://cdn.jsdelivr.net/npm/vue"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 <!--注意：在遍历对象身上的键值对的时候，除了有val key ，在第三个位置还有一个索引--> 15 <p v-for="(val,key,i) in user">值是：{{val}}---键是：{{key}}---索引{{i}}</p> 16 </div> 17 18 19 <script> 20 //创建 Vue 实例，得到 ViewModel 21 var vm = new Vue({ 22 el:'#app', 23 data:{ 24 user:{ 25 id:1, 26 name:'安迪', 27 gender:'男' 28 } 29 }, 30 methods:{} 31 }); 32 </script> 33 </body> 34 </html>
4.v-for迭代数字
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8 <!--1.导入Vue的包--> 9 <script src=" https://cdn.jsdelivr.net/npm/vue"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 <!-- in后面我们放过普通数组，对象数组，对象，还可以放数字 --> 15 <!-- 注意：如果使用v-for迭代数字的话，前面的count值从1开始 --> 16 <p v-for="count in 10">这是第{{count}}次循环</p> 17 </div> 18 19 20 <script> 21 //创建 Vue 实例，得到 ViewModel 22 var vm = new Vue({ 23 el:'#app', 24 data:{ 25 msg:'' 26 }, 27 methods:{} 28 }); 29 </script> 30 </body> 31 </html>