Vue For循环 - Javascript

Vue是一种用于构建web界面的渐进式Javascript框架。其中一个很有用的特性是循环渲染。本文将介绍Vue的For循环以及如何使用Vue的For循环在网页中渲染列表。

For循环语法

在Vue中，你可以使用 v-for 来进行循环渲染。它的语法如下：

<!-- 基本语法 -->
<element v-for="(item, index) in array" :key="unique_key">
     {{ item.text }}
</element>

v-for 指令需要一个数组, 在这个数组上进行循环。在循环过程中，你可以使用 (item, index) 得到数组元素和索引，同时你可以可选地提供自定义键来优化列表渲染。

下面是简单的demo，计算出0到4的自然数列表并在页面中渲染：

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

<script>
export default {
  data() {
    return {
      numbers: [0, 1, 2, 3, 4]
    }
  }
}
</script>

For循环的简写

如果你仅仅需要循环数组并且不需要使用索引, 那么可以使用简写：

<!-- 简写 -->
<element v-for="item in array" :key="unique_key">
     {{ item.text }}
</element>

使用该简写的话可以使HTML更加简洁。

For循环中的对象

如果你需要循环一个对象，而不是数组的话你依然可以使用 v-for。

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

object 中的每一个键和值会提供给 (value, key) 得到使用。你可以看到在这个例子中，我们使用了 key 作为 v-for 的 key。作为字符串的键在渲染上是最有效的，但是在布局中本身是无意义的。所以如果你在每一个子组件中使用了 key 的话，那么它就不是无意义的了。

循环数组的索引

我们可以使用循环数组的索引。下面是一个例子，在整体列表中输出当前项目的索引：

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

<script>
export default {
  data() {
    return {
      items: ['apple', 'banana', 'orange']
    }
  }
}
</script>

这里我们使用了 index 变量来获取索引。

过滤已渲染数据

有时候我们需要在循环结束后过滤已渲染数据，表示我们只需要显示所有不重复的标签，同时不需要包含重复的标签。

下面是一个例子，我们接收一个包含重复元素的列表，将其展示为没有重复元素的列表：

<template>
  <div>
    <ul>
      <li v-for="value in uniqueItems">{{ value }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['apple', 'banana', 'orange', 'banana', 'orange']
    }
  },
  computed: {
    uniqueItems() {
      return Array.from(new Set(this.items))
    }
  }
}
</script>

这里我们将 uniqueItems 计算属性返回一个没有重复元素的数组。

总结

使用Vue的 v-for 指令可以方便地渲染循环列表，并且和计算属性和复合组件结合使用可以变得非常高效。使用 v-for，你可以循环任何类型的数组、对象以及内部组件。如果你想要了解更多 v-for 的深入知识，请参考Vue的官方文档。