Vue,v-for循环遍历方式

v-for循环遍历方式

  1.v-for循环普通数组

     item是自定义名称， in后面加的是 list这个普通数组

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <script src="../js/vue.js"></script>
 8     <body>
 9         <div id="app">
10             <p>{{ list }}</p>
11 
12             <p v-for="item in list">{{ item }}</p>
13             
14             <p v-for="(item,i) in list"> 索引值:{{ i }}  --- 每一项:{{ item }}</p>
15         </div>
16     </body>
17 </html>
18 <script>
19     var vm = new Vue({
20         el:'#app',
21         data:{
22             list:[1,2,3,4,5,6]
23         },
24         methods:{
25             
26         }
27     })
28 </script>

   效果图

　

 

  2.v-for循环对象数组

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <script src="../js/vue.js"></script>
 8     <body>
 9         <div id="app">
10             
11             <!-- 不一定非用item， 可以换 -->
12             <p v-for="user in list">{{ user.id }} --- {{user.name}}</p>
13             
14             =======================================================================
15             
16             <p v-for="(user,i) in list">Id:{{user.id}} --- name:{{user.name}} --- 索引:{{i}}</p>
17         </div>
18     </body>
19 </html>
20 <script>
21     var vm = new Vue({
22         el:'#app',
23         data:{
24             list:[
25                 {id:1,name:'aa'},
26                 {id:2,name:'bb'},
27                 {id:3,name:'cc'},
28                 {id:4,name:"dd"}
29             ]
30         },
31         methods:{}
32     })
33 </script>

 

   效果图

    

 

  3.v-for循环对象

　　demo因为没有写下方的（val, key, i），所以只能遍历出val， 不能遍历出key和i

　　其实这个demo就是val，只不过写法不一样

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <script src="../js/vue.js"></script>
 8     <body>
 9         <div id="app">
10             
11             <p v-for="demo in user"> demo:{{ demo }} </p>
12             
13             ====================================
14             <!-- 键值对的形式 -->
15             <!-- 注意： 在遍历对象身上的键值对的时候， 除了 有 val  key  ，在第三个位置还有 一个 索引 i -->
16             <p v-for="(val, key, i) in user"> 值 val:{{ val }} ---  键 key:{{ key }} --- 索引 i:{{ i }}</p>
17         </div>
18     </body>
19 </html>
20 <script>
21     var vm = new Vue({
22         el:'#app',
23         data:{
24             user: {
25                 id: 1,
26                 name: '哈哈',
27                 sex: '男'
28             }
29         }
30     })
31 </script>

 

 

   效果图

    

　4.v-for迭代数字

 　　因为直接循环的 p标签里的数字10，所以data里不需要写数字

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <script src="../js/vue.js"></script>
 8     <body>
 9         <div id="app">
10             <!-- in 后面我我们放过  普通数组，对象数组，对象， 还可以放数字 本次放的就是数字10 -->
11             <!-- 注意 ： 如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始 -->
12             <p v-for="count in 10"> 这是第 {{ count }} 次循环</p>
13         </div>
14     </body>
15 </html>
16 <script>
17     var vm = new Vue({
18         el:'#app',
19         data:{},
20         methods:{}
21     })
22 </script>

 

  效果图

 

 

 

2019-06-10 16:14:44

 

posted on 2019-06-10 16:23  我1我1我1  阅读(30653)  评论(2)  编辑  收藏  举报

导航