Vue v-for循环-CSDN博客

本文链接：https://blog.csdn.net/AllenWalker1936/article/details/89476125

四种v-for循环

例子

1.循环普通数组

<p v-for="(item, i) in list">索引：{{i}} 值为：{{item}}</p>

2.循环对象数组

<p v-for="(who, i) in list2">索引：{{i}} ID：{{who.id}} 名字为：{{who.name}}</p>

3.循环对象

<p v-for="(val, key, i) in user">索引：{{i}} 值为：{{val}} 键为：{{key}}</p>

4.迭代数字

<p v-for="count in 5">这是第{{ count }}次循环</p>

TIPS

在遍历对象身上的键值对的时候，除了有 val key 以外，在第三个位置还有一个索引
迭代数字的时候，count的值从1开始而不是0开始

总代码

<!doctype html>
<html>
<head>
    <title>vue v-for循环</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app1">
        <!-- <p>{{list[0]}}</p> -->
        <!-- 循环普通数组 -->
        <p v-for="(item, i) in list">索引：{{i}} 值为：{{item}}</p>
        <hr>
        <!-- 循环对象数组 -->
        <p v-for="(who, i) in list2">索引：{{i}} ID：{{who.id}} 名字为：{{who.name}}</p>
        <hr>
        <!-- 循环对象 -->
        <!-- 在遍历对象身上的键值对的时候，除了有 val key 以外，在第三个位置还有一个索引 -->
        <p v-for="(val, key, i) in user">索引：{{i}} 值为：{{val}} 键为：{{key}}</p>
        <hr>
        <!-- 迭代数字 -->
        <!-- 迭代数字的时候，count的值从1开始而不是0开始 -->
        <p v-for="count in 5">这是第{{ count }}次循环</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app1',
            data: {
                list: [1, 3, 5, 7, 9],//普通数组
                list2: [
                    {id:1, name:'张三'},
                    {id:2, name:'李四'},
                    {id:3, name:'王五'},
                    {id:4, name:'女六'},
                    {id:5, name:'何七'},
                ],//对象数组
                user: {
                id: 1,
                name: 'HQ',
                gender: '男1'
                }//对象
            },
            methods: {}
        })
    </script>
</body>
</html>