VUE课程参考---13、循环指令v-for

一、总结

一句话总结：

vue中循环指令v-for可以循环数组（v-for="item in list"）、循环对象（v-for="(val,key) in obj"）、循环数字（v-for="count in 10"）

1、v-for循环数组：{{item}}
2、v-for循环对象：val：{{val}}---key：{{key}}
3、v-for循环数字：{{count}}

1、vue中v-for指令的三种用法？

1、v-for循环数组：{{item}}

2、v-for循环对象：val：{{val}}---key：{{key}}

3、v-for循环数字：{{count}}

2、v-for循环数组的时候为什么item在index前面，例如v-for="(item,index) in list"？

作者在写方法的时候，肯定是最重要的、最常用的参数在前面，就像forEach中的回调函数的参数（val、index、arr）

3、v-for遍历对象的时候，比如v-for="(val,key) in obj"，为什么有val、key，并且val为什么在key前面？

为什么有val、key：因为对象里面本身就是键值对，肯定是要有key和val

val在key前面：因为val比key更常用，作者在写方法的时候，肯定是最重要的、最常用的参数在前面

二、循环指令v-for

博客对应课程的视频位置：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>13、循环指令v-for</title>
 6 </head>
 7 <body>
 8 <!--
 9 
10 1、v-for循环数组：<p v-for="item in list">{{item}}</p>
11 2、v-for循环对象：<p v-for="(val,key) in obj">val：{{val}}---key：{{key}}</p>
12 3、v-for循环数字：<p v-for="count in 10">{{count}}</p>
13 
14 v-for循环数组的时候为什么item在index前面，例如v-for="(item,index) in list"
15 作者在写方法的时候，肯定是最重要的、最常用的参数在前面，就像forEach中的回调函数的参数（val、index、arr）
16 
17 v-for遍历对象的时候，比如v-for="(val,key) in obj"，为什么有val、key，并且val为什么在key前面
18 为什么有val、key：因为对象里面本身就是键值对，肯定是要有key和val
19 val在key前面：因为val比key更常用，作者在写方法的时候，肯定是最重要的、最常用的参数在前面
20 
21 
22 
23 -->
24 <div id="app">
25     <!--1、v-for循环数组-->
26 <!--    <p v-for="item in list">{{item}}</p>-->
27 <!--    <p v-for="(item,index) in list">{{item}}&#45;&#45;{{index}}</p>-->
28     <!--循环对象数组-->
29 <!--    <p v-for="item in objArr">{{item.name}}-&#45;&#45;{{item.age}}</p>-->
30     
31     <!--2、v-for循环对象-->
32     <p v-for="val in obj">{{val}}</p>
33     <p v-for="(val,key) in obj">val：{{val}}---key：{{key}}</p>
34     <!--接第三个参数index-->
35     <p v-for="(val,key,index) in obj">val：{{val}}---key：{{key}}---index：{{index}}</p>
36 
37     <!--3、v-for遍历数字-->
38     <p v-for="count in 10">{{count}}</p>
39 
40 </div>
41 <script src="../js/vue.js"></script>
42 <script>
43     let vm = new Vue({
44         el: '#app',
45         data: {
46             list:[11,12,13,14,15,16],
47             obj:{name:'赵云',age:18},
48             objArr:[
49                 {name:'鲁班',age:3},
50                 {name:'武器大师',age:13},
51                 {name:'飞侠',age:14},
52                 {name:'龙太子',age:15},
53             ]
54         }
55     });
56 </script>
57 </body>
58 </html>