如何映射数组 Vue.js - JavaScript

在 Vue.js 中映射数组是一项很常见的任务，幸运的是 Vue.js 提供了一组内置指令来帮助我们完成这项任务。本文将介绍这些指令以及如何使用它们来映射数组。

v-for 指令

v-for 是 Vue.js 中用于循环渲染数组的指令，它可以像 JavaScript 中的 for 循环一样在模板中循环渲染数组。

在以下示例中，我们创建了一个数组 items 然后使用 v-for 指令来循环渲染数组中的每个元素。

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
      ],
    };
  },
};
</script>

在这个例子中，我们使用 v-for="item in items" 来循环渲染数组。item 是一个临时变量，用于存储循环过程中的当前元素。我们还使用了 :key="item.id" 来为每个列表项指定一个唯一的键值，以满足 Vue.js 的要求。

v-for 指令中的索引和值

v-for 指令还可以提供第二个参数来获取数组中元素的当前索引。

以下示例演示如何同时使用值和索引：

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
      ],
    };
  },
};
</script>

在这个例子中，我们使用了 (item, index) in items 来同时获取值和索引。然后我们在模板中使用 {{ index }} - {{ item.text }} 输出了每个元素的索引和文本。

v-for 指令中的对象

除了数组之外，我们还可以使用 v-for 指令循环渲染对象的属性和值。

以下示例演示如何在对象上使用 v-for 指令：

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

<script>
export default {
  data() {
    return {
      data: {
        firstName: 'John',
        lastName: 'Doe',
        age: 30,
      },
    };
  },
};
</script>

在这个例子中，我们使用了 (value, key) in data 来循环渲染对象的属性和值。然后我们在模板中使用 {{ key }}: {{ value }} 输出了每个属性名和属性值。

总结

在 Vue.js 中映射数组是一项常见的任务。Vue.js 提供了一组内置指令来帮助我们完成这项任务。v-for 指令是用于循环渲染数组和对象的主要指令。它可以在模板中循环渲染数组或对象的属性和值。使用 v-for 指令时需要注意，在循环渲染数组时需要为每个列表项指定一个唯一的键值。在循环渲染对象时需要注意，Vue.js 会遍历对象的可枚举属性，但不会遍历它的原型链上的属性。