Vue中v-for遍历数组和对象

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

DangR-Jisoo

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

阅读量1.1k

点赞数 1

分类专栏： Vue 前端

本文链接：https://blog.csdn.net/Angela_Connie/article/details/114296598

版权

前端同时被 2 个专栏收录

45 篇文章 2 订阅

订阅专栏

Vue

18 篇文章 2 订阅

订阅专栏

Vue中v-for遍历数组和对象

<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in arr">{{index}}.{{item}}</li>
        </ul>
        <ul>
            <!-- 第一种遍历方法 -->
            <li>{{info.name}}</li>
            <li>{{info.age}}</li>
            <li>{{info.height}}</li>
        </ul>
        <ul>
            <!-- 第二种遍历方法 -->
            <li v-for="item in info">{{item}}</li>
        </ul>
        <ul>
            <!-- 第三种遍历方法 -->
            <li v-for="(key,value,index) in info">{{index}}-{{value}}--{{key}}</li>
        </ul>
    </div>
    <script>
        /* 拿到元素在数组中的索引值 v-for=(item ,index) in data*/
        const app = new Vue({
            el: "#app",
            data: {
                arr: ['jisoo', 'jennie', 'rose', 'lisa'],
                info: {
                    name: 'jisoo',
                    age: 25,
                    height: 1.65
                }
            }
        })
    </script>
</body>

对比上述代码：

若只想拿到数组的值，直接使用v-for="item in message"
若还想拿到索引值，使用v-for="(item,index) in message"，index为索引值
遍历对象，因为对象既有属性，也有属性值，所以<li v-for="(key,value,index) in info">{{index}}-{{value}}--{{key}}</li>

DangR-Jisoo

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue中v-for遍历数组和对象

Vue中v-for遍历数组和对象<body> <div id="app"> <ul> <li v-for="(item,index) in arr">{{index}}.{{item}}</li> </ul> <ul>  <li>{{info
复制链接

扫一扫