首页 > 其他 > 详细

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

时间:2019-06-07 15:43:26      阅读:71      评论:0      收藏:0      [点我收藏+]

 

技术分享图片

 

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指令的四种使用方式

原文:https://www.cnblogs.com/songsongblue/p/10988255.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!