vue v-for语法遍历
v-for除了可以迭代数组,也可以迭代对象。语法基本类似(:key=index一般和v-for一起使用)。
语法:
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
1个参数时,得到的是对象的属性值
2个参数时,第一个是属性值,第二个是属性名
3个参数时,第三个是索引,从0开始
示例:
<div id="app"> <ul> <li v-for="(value, key, index) in user" :key=index> {{index + 1}}. {{key}} - {{value}} </li> </ul> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ user:{name:'名字', sex:'性别', age: 20} } }) </script>
遍历数组
语法:
v-for="item in items"
items:要遍历的数组,需要在vue的data中定义好。
item:迭代得到的数组元素的别名
数组角标
在遍历的过程中,如果我们需要知道数组角标,可以指定第二个参数:
语法
v-for="(item,index) in items"
items:要迭代的数组
item:迭代得到的数组元素别名
index:迭代到的当前元素索引,从0开始。
示例
<ul> <li v-for="(p, index) in person"> {{index + 1}}. {{p.name}} - {{p.gender}} - {{p.age}} </li> </ul>