Vue v-for 指令

示例

使用 v-for 指令基于数组创建哺乳动物列表:

<template>
  <h2>v-for 指令示例</h2>
  <p>使用 v-for 指令基于数组创建哺乳动物列表。</p>
  <ul>
    <li v-for="x in animals">{{ x }}</li>
  </ul>
</template>

运行示例 »

请参阅下面的更多示例。

定义和用法

v-for 指令用于根据数据源呈现多个元素。

v-for 指令与语法 "(item, key, index) in dataSource" 一起使用，其中:

"item" 别名表示 "dataSource" 内的元素。
如果数据源是对象，则可以使用"key" 别名来获取属性名称。
如果数据源是数组或对象，则可以使用"index" 别名。
"dataSource" 必须是您要循环的实际数据源的名称。

您可以自己选择 "item", "key" 和 "index" 别名的名称，但顺序是"item、key、index"。

这些是 v-for 指令可以使用的数据源:

数据源类型	详细信息
`Array`	`v-for` 循环遍历数组，可以选出元素以及每个元素的索引并使用。	运行示例 »
`Object`	`v-for` 循环遍历对象。可以挑选并使用属性名称、值和索引。	运行示例 »
`number`	`v-for` 呈现一个列表，其中每个项目都是从一开始的数字，最后一个数字是提供的数字。还可以选出每个元素的索引。	运行示例 »
`string`	`v-for` 循环遍历字符串。每个字符及其索引都可以被挑选出来并使用。	运行示例 »
`Iterable`	`v-for` 也可以循环迭代。可迭代对象是使用可迭代协议的值，例如 Map 和 Set。	运行示例 »

注意:为了优化性能，当数据源被操作时，Vue 会重用使用 v-for 创建的元素。这可能会导致奇怪的结果（此处解释）。为了防止 Vue 在使用 v-for 时错误地重用元素，您应该始终将特殊的 key 属性与 v-bind 一起使用，以唯一地标记每个元素（参见示例 6）。

更多示例

示例 1

使用 v-for 指令基于数组呈现哺乳动物列表，并选取数组中每个元素的索引:

<template>
  <h2>v-for 指令示例</h2>
  <p>使用 v-for 指令基于数组创建哺乳动物列表以及每个哺乳动物的索引。</p>
  <ul>
    <li v-for="(x, index) in animals">On index {{ index }}: "{{ x }}"</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      animals: ['Tiger','Zebra','Wolf','Crocodile','Seal']
    };
  }
};
</script>

运行示例 »

示例 2

使用 v-for 指令呈现属性列表，为对象中的每个属性挑选属性名称和值:

<template>
  <h2>v-for 指令示例</h2>
  <p>在对象上使用 v-for 指令来创建对象属性和相应属性值的列表。</p>
  <ul>
    <li v-for="(x, key) in animal">(Property name: value) = ({{ key }}: {{ x }})</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      animal: {
        name: 'Lion',
        heightCM: 110,
        weightKG: 150
      }
    };
  }
};
</script>

运行示例 »

示例 3

使用 v-for 指令根据数字呈现列表:

<template>
  <h2>v-for 指令示例</h2>
  <p>使用 v-for 指令和 number 来渲染包含该数量元素的列表。</p>
  <ul>
    <li v-for="(x, index) in 10">Item: {{ x }}, index: {{ index }}</li>
  </ul>
</template>

运行示例 »

示例 4

使用 v-for 指令循环遍历字符串:

<template>
  <h2>v-for 指令示例</h2>
  <p>使用 v-for 指令循环遍历字符串中的字符。</p>
  <ul>
    <li v-for="(x, index) in 'Ice cream'">Item: "{{ x }}", index: {{ index }}</li>
  </ul>
</template>

运行示例 »

示例 5

使用 v-for 指令循环遍历使用可迭代协议创建的对象:

<template>
  <h2>v-for 指令示例</h2>
  <p>使用 v-for 指令基于使用可迭代协议创建的对象来呈现列表。</p>
  <ul>
    <li v-for="value in iterableObject">{{ value }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      iterableObject: this.createIterable(['City', 'Park', 'River'])
    };
  },
  methods: {
    createIterable(array) {
      let currentIndex = -1;
      return {
        [Symbol.iterator]: function () {
          return {
            next: () => {
              if (currentIndex < array.length - 1) {
                currentIndex++;
                return { value: array[currentIndex], done: false };
              } else {
                return { done: true };
              }
            }
          };
        }
      };
    }
  }
};
</script>

运行示例 »

示例 6

使用 v-for 指令为字符串中的每个字符呈现一个 div 元素。始终建议您将 v-bind:key 与 v-for 指令一起使用:

<template>
  <h2>v-for 指令示例</h2>
  <p>使用 v-for 指令和 'v-bind:key' 来基于字符串呈现 DIV 元素。</p>
  <div id="wrapper">
    <div v-for="x in text" v-bind:key="x">{{ x }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: 'I love ice cream.'
    };
  }
};
</script>

<style>
#wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 280px;
}
#wrapper > div {
  margin: 5px;
  padding: 5px 10px;
  border: solid black 1px;
  background-color: lightgreen;
}
</style>

运行示例 »