Vue.js 中 v-for 指令的三种常见用法详解及key、value、id的作用

news2024/12/27 8:07:19

作者：CSDN-PleaSure乐事

欢迎大家阅读我的博客希望大家喜欢

使用环境：WebStorm

遍历数组

介绍

代码

遍历对象数组

介绍

代码

遍历对象本身

介绍

代码

效果呈现

key、value、id的作用

1. value

2. key

3. id

在 Vue.js 中，v-for 可以用于根据数据源动态渲染列表或重复的元素。接下来是 v-for 的三种常见用途：遍历数组、对象数组以及对象本身。

遍历数组

介绍

v-for 可以用来遍历一个简单的数组，并为数组中的每个项生成相应的 DOM 元素。这是最常见的用法之一。我们可以访问当前项和它的索引，这在需要显示索引时非常有用。

代码

<template>
  <ul>
    <li v-for="(item, index) in arrays" :key="index">{{ item }}-{{ index }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      arrays: ['java', 'c++', 'python'],
    };
  }
};
</script>

我们使用 v-for="(item, index) in arrays" 来遍历 arrays 数组。对于数组中的每一项，我们创建了一个 <li> 元素，并且同时显示了该项（item）及其对应的索引（index）。为了确保每个元素都有唯一的标识符，我们使用了 :key="index"。

遍历对象数组

介绍

当我们的数据源是一个包含多个对象的数组时，v-for 也可以用来遍历这些对象。这种情况下，我们通常会访问对象的属性，并可能需要生成更复杂的 HTML 结构。

代码

<template>
  <div v-for="name in arrays_2" :key="name.id">
    <span>{{ name.id }}-</span>
    <a :href="name.back">{{ name.name }}</a>
    <br>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arrays_2: [
        { id: 1, name: "bilibili", back: "http://www.bilibili.com" },
        { id: 2, name: "csdn", back: "http://www.csdn.com" },
        { id: 3, name: "baidu", back: "http://www.baidu.com" }
      ],
    };
  }
};
</script>

每个对象都包含 id、name 和 back 属性。我们为每个对象生成了一个 <div> 容器，其中包含一个 <span> 显示 id 和一个带有链接的 <a> 标签。这里也使用了 :key="name.id" 来提供唯一性。

遍历对象本身

介绍

除了遍历数组外，v-for 也可以用来遍历一个普通的 JavaScript 对象。在这种情况下，我们可以访问对象的键名、值和索引。

代码

<template>
  <ul>
    <li v-for="(value, key, id) in info" :key="key">{{ key }}-{{ value }}-{{ id }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      info: {
        sbName: 'YJH',
        sbAge: 20,
        sbSex: '男'
      },
    };
  }
};
</script>

这里的 v-for="(value, key, id) in info" 语句遍历了 info 对象。对于每个属性，我们获取了其值（value）、键名（key）以及索引（id），并把它们显示在一个 <li> 元素中。同样地，我们为每个元素设置了 :key="key" 以保证唯一性。