Vue,v-for循環遍歷方式

時間 2019-11-12

標籤 vue 循環遍歷方式简体版

原文原文鏈接

v-for循環遍歷方式

1.v-for循環普通數組

item是自定義名稱， in後面加的是 list這個普通數組html

 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和ivue

　　其實這個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裏不須要寫數字app

 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>