vue v-for的四种遍历方法

最新推荐文章于 2024-08-21 08:58:39 发布

天马行空zqzq

最新推荐文章于 2024-08-21 08:58:39 发布

阅读量3.1k

点赞数

本文链接：https://blog.csdn.net/qq_42039912/article/details/107286960

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 索引i可以省略 -->
        <p v-for="(item, i) in dist">项：{{ item }}----索引：{{ i }}</p>
        <p v-for="(item, i) in dist1">id:{{item.id}}--姓名：{{item.name}}--索引：{{i}}</p>
        <p v-for="(key, val, i) in dist2">键：{{val}}---值：{{key}}---索引：{{i}}</p>
        <p v-for="item in count">{{item}}</p>

    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                //要遍历的是普通数组：
                dist: [1, 2, 3, 4, 5, 6, 7],
                // 数组里面放了对象
                dist1: [{id: 1, name: 'zs'},{id: 2, name: 'zs1'},{id: 3, name: 'zs2'}],
                // 要遍历的是对象
                dist2: {                   
                    id: 1,
                    name: '李四1',
                    gender: '男'                  
                },
                // 要遍历的是数字,数字是从1开始遍历的
                count: 10
            }
        })
    </script>
</body>
</html>

注意：