如何使用 v-for 遍历数组和对象

最新推荐文章于 2024-05-20 13:58:24 发布

莫余

最新推荐文章于 2024-05-20 13:58:24 发布

阅读量2k

点赞数

分类专栏：凌晨3:40的Vue 文章标签： vue javascript 索引 v-for

本文链接：https://blog.csdn.net/qq_44824148/article/details/112695551

版权

凌晨3:40的Vue 专栏收录该内容

57 篇文章 1 订阅

订阅专栏

v-for

v-for的语法类似于JavaScript中的for循环。

格式如下：

item in items的形式

v-for 遍历数组

在遍历的过程中,没有使用索引值(下标值)
在遍历的过程中, 获取索引值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

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

    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                books: ['aaa', 'bbb', 'ccc']
            }
        })
    </script>
</body>

</html>

v-for 遍历对象

在遍历对象的过程中, 如果只是获取一个值, 那么获取到的是value
获取key和value 格式: (value, key)
获取key和value和index 格式: (value, key, index)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <div>
            <ul>
                <li v-for="m in person">{{m}}</li>
            </ul>
        </div>
        <div>
            <ul>
                <li v-for="(value,key) in person">{{value}}-{{key}}</li>
            </ul>
        </div>
        <div>
            <ul>
                <li v-for="(value,key,index) in person">{{index+1}}-{{value}}-{{key}}</li>
            </ul>
        </div>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                person: {
                    name: 'Hello',
                    age: 20,
                    sex: '男'
                }
            }
        })
    </script>
</body>

</html>

莫余

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
如何使用 v-for 遍历数组和对象

v-forv-for的语法类似于JavaScript中的for循环。格式如下：item in items的形式v-for 遍历数组在遍历的过程中,没有使用索引值(下标值)在遍历的过程中, 获取索引值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid
复制链接

扫一扫