VUE课程---17、循环指令v-for
一、总结
一句话总结：
vue中循环指令v-for可以循环数组（v-for="item in list"）、循环对象（v-for="(val,key) in obj"）、循环数字（v-for="count in 10"）
1、v-for循环数组：<p v-for="item in list">{{item}}</p>
2、v-for循环对象：<p v-for="(val,key) in obj">val：{{val}}---key：{{key}}</p>
3、v-for循环数字：<p v-for="count in 10">{{count}}</p>
1、vue中v-for指令的三种用法？
1、v-for循环数组：<p v-for="item in list">{{item}}</p>
2、v-for循环对象：<p v-for="(val,key) in obj">val：{{val}}---key：{{key}}</p>
3、v-for循环数字：<p v-for="count in 10">{{count}}</p>
2、v-for循环数组的时候为什么item在index前面，例如v-for="(item,index) in list"？
作者在写方法的时候，肯定是最重要的、最常用的参数在前面，就像forEach中的回调函数的参数（val、index、arr）
二、循环指令v-for
博客对应课程的视频位置：17、循环指令v-for
https://www.fanrenyi.com/video/26/234
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>循环指令v-for</title> 6 </head> 7 <body> 8 <!-- 9 10 --> 11 <div id="app"> 12 <!--1、用v-for指令遍历普通数组--> 13 <!--这里的item代表数组中的元素--> 14 <!-- <p v-for="item in list">{{item}}</p>--> 15 <!--不仅想访问到数组的元素，还想访问到元素对应的索引--> 16 <!-- <p v-for="(item,index) in list">元素是：{{item}}-----索引是：{{index}}</p>--> 17 18 <!--2、用v-for指令遍历对象数组--> 19 <!-- <p v-for="(item) in list2">name是：{{item.name}}-----age是：{{item.age}}</p>--> 20 21 <!--3、用v-for指令遍历对象--> 22 <!-- <p v-for="value in obj">{{value}}</p>--> 23 <!-- <p v-for="(value,key) in obj">值是：{{value}}---键是：{{key}}</p>--> 24 <!-- <p v-for="(value,key,index) in obj">值是：{{value}}---键是：{{key}}---索引是：{{index}}</p>--> 25 26 <!--4、用v-for指令遍历数字--> 27 <!--item从1开始--> 28 <!-- <p v-for="item in 10">{{item}}</p>--> 29 30 </div> 31 <script src="../js/vue.js"></script> 32 <script> 33 new Vue({ 34 el:'#app', //element 35 data:{ 36 list:[1,2,3,4,5,6], 37 list2:[ 38 {name:'赵云',age:18}, 39 {name:'鲁班',age:8}, 40 {name:'龙太子',age:33}, 41 {name:'剑侠客',age:22} 42 ], 43 obj:{name:'赵云',age:18,gender:'male'} 44 } 45 }); 46 47 //for...in做循环，循环数组和对象 48 // let arr=[true,2,3,4,5,6]; 49 // console.log(true in arr);//false 50 // console.log(0 in arr);//true 51 //i代表的是数组中的索引 52 // for(let i in arr) console.log(i,arr[i]); 53 54 //for...in循环对象 55 // let obj={name:'赵云',age:18,gender:'male'}; 56 // console.log('name' in obj);//true 57 // console.log('赵云' in obj);//false 58 // //i代表的是键值对中的键 59 // for(let i in obj) console.log(i,obj[i]); 60 61 </script> 62 </body> 63 </html>