❤️vue v-for语法遍历

小明的学习圈子2023-11-26后端vue 循环

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>
Last Updated 2024/4/6 10:47:15