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>

 

posted @ 2021-03-07 01:04  程序员小明1024  阅读(657)  评论(0编辑  收藏  举报