Vue v-for遍历详细使用

最新推荐文章于 2024-08-26 11:05:44 发布

-風过无痕

最新推荐文章于 2024-08-26 11:05:44 发布

阅读量4.8k

点赞数 1

分类专栏：实际开发-vue知识文章标签： vue.js javascript 前端

本文链接： https://blog.csdn.net/weixin_53579656/article/details/129461433

版权

实际开发-vue知识专栏收录该内容

10 篇文章 1 订阅

订阅专栏

本文介绍了Vue中v-for遍历的用法，包括遍历对象和数组对象，强调了在不同情况下的参数（值、索引、下标）以及遍历数字时可能出现的报错。并提供了一段包含错误处理的代码示例，强调理解v-for工作原理的重要性。

摘要由CSDN通过智能技术生成

前言

当v-for遍历的时候,一个参数是每一项值(item),2个参数是每一项值和索引(item,index),3个参数*是每一项值,索引,下标(item,index,i)。
当v-for遍历对象时,每一项，索引，下标，都有值。下标从0开始。
当v-for遍历数组对象时,每一项，索引，有值。下标没有值，索引从0开始。
当v-for遍历数字时,每一项，索引，有值。下标没有值，索引从0开始，会跟上面的索引相同报错，不影响使用。

全部代码

<template>
  <div class="box">
    <div class="son" v-for="(item, index, i) in data" :key="index">
      <p>值：{{ item }}</p>
      <p>索引：--- {{ index }}</p>
      <p>下标：--- {{ i }}</p>
      <p>v-for遍历对象</p>
    </div>
    <div class="son" v-for="(item, index, i) in datae" :key="index">
      <p>值：{{ item }}</p>
      <p>索引: --- {{ index }}</p>
      <p>下标: --- {{ i }}</p>
      <p>v-for遍历对象(有索引和下标形式)</p>
    </div>
    <div class="son" v-for="(item, index, i) in dataer" :key="index">
      <p>值：{{ item }}</p>
      <p>索引: --- {{ index }}</p>
      <p>下标: --- {{ i }}</p>
      <p>v-for遍历数组对象</p>
    </div>
    <!-- 注释掉下面这一段报错就会没了 -->
    <div class="son" v-for="(item, index, i) in 3" :key="index">
      <p>值：{{ item }}</p>
      <p>索引：--- {{ index }}</p>
      <p>下标：--- {{ i }}</p>
      <p>v-for遍历数字</p>
    </div>
    <div class="title">
      结论：
      <p>
        当v-for遍历的时候,<span>一个参数</span>是每一项值(item),<span>2个参数</span>是每一项值和索引(item,index),<span>3个参数</span>是每一项值,索引,下标(item,index,i)。
      </p>
      <p>当v-for遍历对象时,每一项，索引，下标，都有值。下标从0开始。</p>
      <p>
        当v-for遍历数组对象时,每一项，索引，有值。 下标没有值，索引从0开始。
      </p>
      <p>
        当v-for遍历数字时,每一项，索引，有值。
        下标没有值，索引从0开始，会跟上面的索引相同报错，不影响使用。
      </p>
    </div>
  </div>
</template> 

<script>
export default {
  data() {
    return {
      data: {
        id: 12,
        name: "安康几十年",
        conta: "jshbkj",
      },
      datae: {
        10: { id: 6, name: "战三" },
        你好: { id: 7, name: "ajsd" },
        张三: { id: 8, name: "jskj" },
      },
      dataer: [
        { id: 3, name: "战三" },
        { id: 4, name: "ajsd" },
        { id: 5, name: "jskj" },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 800px;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  .son {
    width: 33.33%;
    height: 120px;
    padding-top: 20px;
    // background-color: skyblue;
    border-bottom: 1px solid #ccc;
    text-align: center;
    p:last-child {
      color: skyblue;
      font-size: 18px;
    }
  }
  .title {
    font-size: 25px;
    font-weight: 700;
    p {
      font-size: 18px;
      margin: 10px 0;
      span {
        color: red;
      }
    }
  }
}
</style>

运行结果