Vue初学09-v-for遍历

最新推荐文章于 2022-05-05 23:14:56 发布

置顶周达

最新推荐文章于 2022-05-05 23:14:56 发布

阅读量172

点赞数 1

分类专栏： vue 文章标签： v-for数组遍历 v-for对象遍历

本文链接：https://blog.csdn.net/gis_zhouda/article/details/104918282

版权

vue 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

v-for指令可以用于遍历数组和对象

遍历数组

<body>

    <div id="app">
        <ul>
            <li v-for="item in books">{{item}}</li>
        </ul>
    </div>

    <script>
        const vue = new Vue({
            el:"#app",
            data:{
                books:['狼道','人性的弱点','鬼谷子']
            }
        });
    </script>

</body>

效果如下：

如果要把索引一块取出来，如下

<body>

    <div id="app">
        <ul>
            <li v-for="(item,index) in books">{{index}}-{{item}}</li>
        </ul>
    </div>

    <script>
        const vue = new Vue({
            el:"#app",
            data:{
                books:['狼道','人性的弱点','鬼谷子']
            }
        });
    </script>

</body>

效果如下：

这语法简单大气上档次~~~

遍历对象

除了遍历数组也可以遍历对象，默认情况下取的是对象的value值

<body>

    <div id="app">
        <ul>
            <li v-for="item in student">{{item}}</li>
        </ul>
    </div>

    <script>
        const vue = new Vue({
            el:"#app",
            data:{
                student:{
                    name:'张三',
                    num:'1',
                    age:'18',
                    sex:'男'
                }
            }
        });
    </script>

</body>

效果如下：

如果要连同对象的key一并取出，注意value要写在前面，如下

<body>

    <div id="app">
        <ul>
            <li v-for="(value,key) in student">{{key}}-{{value}}</li>
        </ul>
    </div>

    <script>
        const vue = new Vue({
            el:"#app",
            data:{
                student:{
                    name:'张三',
                    num:'1',
                    age:'18',
                    sex:'男'
                }
            }
        });
    </script>

</body>

效果如下：