v-for遍历数组和对象

小码哥呀

已于 2022-02-08 15:10:18 修改

阅读量788

点赞数

分类专栏： VUE 文章标签： vue.js

于 2021-11-09 10:49:13 首次发布

本文链接：https://blog.csdn.net/qq_46112274/article/details/121223270

版权

VUE 专栏收录该内容

62 篇文章 9 订阅

订阅专栏

v-for遍历数组和对象

1、v-for遍历数组
2、v-for遍历对象

1、v-for遍历数组

在遍历过程中：

输出下标值；
不输出下标值。

<body>
<div id="app">
  <ul>
    <!--1.在遍历过程中，没有使用下标值（索引值）-->
    <li v-for="item in names">{{item}}</li>
  </ul>
  <ul>
    <!--2.在遍历过程中，使用下标值（索引值）-->
    <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: {
            message:'你好呀',
            names:['why','kebo','James','Messi']
        }
    })
</script>
</body>

在这里插入图片描述

2、v-for遍历对象

只获取值
获取key和value
获取key,value和inex


<body>
<div id="app">
  <ul>
    <!--1.在遍历对象的过程中，如果只是获取一个值，怎么获取到value-->
    <li v-for="item in info">{{item}}</li>
  </ul>

  <ul>
    <!--2.获取key和value格式-->
    <li v-for="(value,key) in info">{{value}}---{{key}}</li>
  </ul>

  <ul>
    <!--3.获取key和value和index格式-->
    <li v-for="(value,key,index) in info">{{value}}---{{key}}----{{index}}</li>
  </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message:'你好呀',
            info:{
              name:'why',
              age:18,
              height:1.88
            }
        }
    })
</script>
</body>

在这里插入图片描述

小码哥呀

关注

0
点赞
踩
1

收藏

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

v-for遍历数组和对象1、v-for遍历数组2、v-for遍历对象1、v-for遍历数组在遍历过程中：输出下标值；不输出下标值。<body><div id="app"> <ul>  <li v-for="item in names">{{item}}</li> </ul> <ul> <!--2.在遍
复制链接

扫一扫

专栏目录