vue快速入门(九) 之 v-for用法

最新推荐文章于 2024-08-28 18:19:04 发布

一口木桶饭

最新推荐文章于 2024-08-28 18:19:04 发布

阅读量336

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44415928/article/details/104904997

版权

vue 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

v-for是一个十分常用的遍历方法,他可以把他本身所在的标签复制很多份,具体份数看for循环多少次,如下例子
在这里插入图片描述

<body>
    <div id="app">
        <ul>
            <li v-for="item in language">我会使用</li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",

            data: {
                language: ['java', 'python', 'kotlin', 'golang', 'C#']
            }
        })
    </script>
</body>

我们可以看到
在这里插入图片描述
li标签遍历了五份
我们也可以把for循环里的元素取出来

除此之外我们还可以取出每个元素的索引值
在这里插入图片描述
其中item表示数据本身,后边的index就是索引值

下面我们用对象数据来举例子

<body>
    <div id="app">
        <ul>
            <li v-for="(item, index) in language">{{index}}. 我会使用: {{item}}</li>
        </ul>

        <h2 v-for="item in person">{{item}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",

            data: {
                language: ['java', 'python', 'kotlin', 'golang', 'C#'],
                person: [
                    {name: '张三'},
                    {name: '李四'},
                    {name: '王五'}
                ]
            }
        })
    </script>
</body>