Vue v-for 指令

示例

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

<template>
  <h2>Example v-for Directive</h2>
  <p>Using the v-for directive to create a list of mammals based on an array.</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`也可以循环迭代。 Iterables 是使用 Iterable Protocol 的值，如 Map 和 Set。	运行示例 »

笔记：为了优化性能，Vue 重用了使用以下命令创建的元素v-for当数据源被操纵时。这可能会导致奇怪的结果（在这里解释）。防止Vue在使用时错误地重用元素v-for，你应该总是使用特殊的key属性与v-bind，唯一地标记每个元素（参见示例6）。

更多示例

示例1

使用v-for基于数组渲染哺乳动物列表的指令，并选择数组中每个元素的索引：

<template>
  <h2>Example v-for Directive</h2>
  <p>Using the v-for directive to create a list of mammals, and the index of each mammal, based on an array.</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>Example v-for Directive</h2>
  <p>Using the v-for directive on an Object to create a list of the object properties and the respective property values.</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>Example v-for Directive</h2>
  <p>Using the v-for directive with number to render a list with that number of elements.</p>
  <ul>
    <li v-for="(x, index) in 10">Item: {{ x }}, index: {{ index }}</li>
  </ul>
</template>

运行示例 »

示例4

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

<template>
  <h2>Example v-for Directive</h2>
  <p>Using the v-for directive to loop through the characters in a string.</p>
  <ul>
    <li v-for="(x, index) in 'Ice cream'">Item: "{{ x }}", index: {{ index }}</li>
  </ul>
</template>

运行示例 »

示例5

使用v-for指令循环遍历使用 Iterable Protocol 创建的对象：

<template>
  <h2>Example v-for Directive</h2>
  <p>Using the v-for directive  to render a list, based on an object created with the Iterable Protocol.</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>Example v-for Directive</h2>
  <p>Using the v-for directive with 'v-bind:key' to render DIV elements, based on a string of characters.</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>

运行示例 »

码农教程 - 一技在手,衣食无忧!

Vue v-for 指令

示例

定义和用法

更多示例

示例1

示例2

示例3

示例4

示例5

示例6

相关页面