v-for遍历数组和对象

最新推荐文章于 2024-07-18 18:59:22 发布

Eli-sun

最新推荐文章于 2024-07-18 18:59:22 发布

阅读量6.2k

点赞数 1

分类专栏： Vuejs 文章标签： vue

本文链接：https://blog.csdn.net/vfjcgg/article/details/106626070

版权

Vuejs 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

v-for遍历数组和对象

v-for遍历数组：

当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。
1.v-for的语法类似于JavaScript中的for循环。
2.格式如下：item in items 的形式。

我们来看一个简单地案例：
如果在遍历的过程中不需要使用索引值。
1.v-for=“movie in movies”
2.依次从movies中取出movie，并且在元素的内容中，我们可以使用mustache语法，来使用movie。
如果在遍历的过程中，我们需要拿到元素在数组中的索引值呢？
1.语法格式：v-for=（item，index）in items
2.其中的index就代表了取出的item在原数组中的索引值。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<div id="app">
  <!--1.在遍历过程中，没有使用索引值（下标值）-->
  <ul>
    <li v-for="item in names">{{item}}</li>
  </ul>

  <!--2.在遍历过程中，获取索引值-->
  <ul>
    <li v-for="(item,index) in names">{{index+1}}-{{item}}</li>
  </ul>
</div>

<script src="../vue.min.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'hello',
      names:['小松菜奈','十元','lisa','秀智'],
    }
  })
</script>
</body>
</html>

v-for遍历对象：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<div id="app">
  <!--1.在遍历对象的过程中，如果只是获取一个值，那么获取到的是value-->
  <ul>
    <li v-for="m in info">{{m}}</li>
  </ul>

  <!--2.获取key和value和index  格式：（value，key,index）-->
  <ul>
    <li v-for="(m,key,index) in info">{{m}}-{{key}}-{{index+1}}</li>
  </ul>

</div>

<script src="../vue.min.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
      message:'hello',
      info:{
        name:'Eli',
        age:'19',
        height:1.66,
      }
    }
  })
</script>
</body>
</html>