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>