vue中v-for遍历数组的使用

最新推荐文章于 2023-04-07 15:53:12 发布

grt要一直一直努力呀

最新推荐文章于 2023-04-07 15:53:12 发布

阅读量248

点赞数

分类专栏：前端入门文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_44870115/article/details/118633294

版权

前端入门专栏收录该内容

26 篇文章 1 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <!-- 没有使用索引值 -->
        <ul>
            <li v-for="item in fruit">{{item}}</li>
        </ul>
        <!-- 在遍历的过程中使用索引值 -->
        <ul>
            <li v-for="(item,index) in fruit">{{index+1}}:{{item}}</li>
        </ul>
        <!-- 使用v-for遍历对象，此时使用item显示出来的是值 -->
        <ul>
            <li v-for='item in info'>{{item}}</li>
        </ul>
         <!-- 使用v-for遍历对象，此时显示的包括键和值 -->
         <ul>
            <li v-for='(key,item) in info'>{{key}}:{{item}}</li>
        </ul>
    </div>
    <script>
        var vm=new Vue({
           el: '#app',
           data: {
             fruit: ['apple','banana','orange','grape'],
             info: {
                 name: 'Mary',
                 age: 22,
                 height: 167
             }
           },
           computed: {},
           methods: {}
        })
    </script>
</body>

</html>

在这里插入图片描述

grt要一直一直努力呀

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue中v-for遍历数组的使用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
复制链接

扫一扫

专栏目录