第二章 Vue快速入门-- 17 v-for指令的四种使用方式

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>

第二章 Vue快速入门-- 17 v-for指令的四种使用方式

猜你喜欢