vue中v-for遍历数组

最新推荐文章于 2023-09-04 14:17:29 发布

lzh~

最新推荐文章于 2023-09-04 14:17:29 发布

阅读量7.7k

点赞数 4

分类专栏： # Vue

本文链接：https://blog.csdn.net/weixin_44635198/article/details/113657197

版权

Vue 专栏收录该内容

39 篇文章 6 订阅

订阅专栏

v-for遍历数组

在遍历的过程中，没有使用索引值（下标值）

<ul>
    <li v-for="item in names">{{item}}</li>
</ul>

在遍历的过程中，获取索引值

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

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in names">{{item}}</li>
        </ul>
        <ul>
            <li v-for="(item,index) in names">
                {{index+1}}.{{item}}
            </li>
        </ul>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                names: ['why','kobe','james','curry']
            }
        })

    </script>
</body>
</html>

效果展示
在这里插入图片描述

lzh~

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
3
评论
vue中v-for遍历数组

v-for遍历数组在遍历的过程中，没有使用索引值（下标值）<ul> <li v-for="item in names">{{item}}</li></ul>在遍历的过程中，获取索引值<ul> <li v-for="(item,index) in names"> {{index+1}}.{{item}} </li></ul>代码<!DOCTY
复制链接

扫一扫