Vue中for循环相关用法示例_vuefor循环遍历例子-优快云博客

本文链接：https://blog.youkuaiyun.com/CcoooH/article/details/114133763

博客主要介绍了Vue中for循环遍历数据的相关内容，包括遍历数组里的对象、遍历对象，还提及控制循环次数的方法，如判断索引值范围渲染、截取数组长度控制以及固定循环次数等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1. `v-for`遍历数组里的对象
2. `v-for`遍历对象
3. 控制`v-for`循环次数
4. vue中for循环遍历数据

1. `v-for`遍历数组里的对象

    <ul id="example">
        <li v-for="(item,index) in arr">
            {{index+1}}-{{item.msg}}
        </li>
    </ul>

    var example = new Vue({
        el: "#example",
        data: {
            arr: [
				{msg: '张三'},
            	{msg: '李四'},
            	{msg: '王五'}
            ]
        },
    })

结果：
在这里插入图片描述

2. `v-for`遍历对象

value-值，key-键，index-索引

    <ul id="example">
        <li v-for="(value,key,index) in object">
            {{index+1}} {{key}} : {{value}}
        </li>
    </ul>

    var example = new Vue({
        el: "#example",
        data: {
            object: {
                '姓名': '小明',
                '班级': '二班',
                '学号': '12138'
            }
        },
    })

结果：
在这里插入图片描述

3. 控制`v-for`循环次数

用v-if判断索引值范围再去渲染

 <li v-for="(item,index) in arr" v-if="index < 2 " :key='index'>

通过sclie截取数组的长度控制循环次数

<li v-for="(item,index) in arr.slice(0,2)" :key='index'>

固定循环次数

<li v-for="index of 3" :key='index'>

4. vue中for循环遍历数据

for (let item of this.arr) {
	console.log(item);
};

    var example = new Vue({
        el: "#example",
        data: {
            arr: [1, 2, 3, 4, 5]
        },
        methods: {
            xunhuan: function() {
                for (let item of this.arr) {
                    console.log(item);
                };
            }
        }
    })