v-for指令的使用

在 Vue 中，我们可以使用 v-for 指令绑定数据到数组来渲染一个列表。

使用 v-for 指令需要以 item in items 形式的特殊语法来实现。其中 items 是源数据数组，item 是要在其上进行迭代的数组元素的别名。

示例：

例如假设有一组关于水果的数据，需要使用列表渲染页面，我们可以在 <li> 标签上绑定 v-for 指令：

<div>
    <ul id="array-rendering">
        <li v-for="fruit in fruits">
          {{fruit}}
        </li>
    </ul>
</div>

const app = Vue.createApp({
  data() {
    return {
      fruits:["苹果","西瓜","芒果"]
    }
  }
}).mount('#array-rendering')

我们可以在浏览器中看一下效果：

上述代码中 fruit in fruits 是使用 v-for 指令的语法，然后 fruits 就是data 中定义的数组名，而 fruit 是数组元素迭代的别名，也就是我们自定义的名字。

在 v-for 块中，我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数，即当前项的索引。

示例：

<div>
    <ul id="array-rendering">
        <li v-for="(fruit, index) in fruits">
            {{fruit}}的索引：{{index}}
        </li>
    </ul>
</div>

const app = Vue.createApp({
  data() {
    return {
      fruits:["苹果","西瓜","芒果"]
    }
  }
}).mount('#array-rendering')

刷新浏览器，效果如下所示：

我们也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法：

<div v-for="item of items"></div>

在v-for里使用对象

我们也可以用 v-for 来遍历一个对象的 property。

<ul id="app">
  <li v-for="value in myObject">
    {{ value }}
  </li>
</ul>

Vue.createApp({
  data() {
    return {
      myObject: {
        title: 'Vue入门教程',
        author: '小飞侠',
        publishedAt: '2020-11-10'
      }
    }
  }
}).mount('#app')

在浏览器中的演示结果：

我们也可以提供第二个的参数为 property 名称 ，也就是键名 key：

<ul id="app">
  <li v-for="(value, name) in myObject">
    {{ name }}: {{ value }}
  </li>
</ul>

或者还可以用第三个参数作为索引：

<ul id="app">
  <li v-for="(value, name, index) in myObject">
    {{ index }}. {{ name }}: {{ value }}
  </li>
</ul>

提示： 在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它在不同 JavaScript 引擎下的结果都一致。

v-for迭代整数

v-for 也可以接受整数，在这种情况下，它会把模板重复对应次数。

示例：

<div id="app">
    <p v-for="num in 5">{{num}}</p>
</div>

Vue.createApp({}).mount('#app')

浏览器中演示效果：

v-for与v-if一起使用

提示：不推荐在同一元素上使用 v-if 和 v-for。

当 v-for 与 v-if 处于同一个节点时，v-if 的优先级比 v-for 更高，这意味着 v-if 将没有权限访问 v-for 里的变量：

<!-- 这将引发错误，因为实例上未定义属性item。 -->

<li v-for="item in items" v-if="!item.isComplete">
  {{ item }}
</li>

可以把 v-for 移动到 <template> 标签中来修正：

<template v-for="item in items">
  <li v-if="!item.isComplete">
    {{ item }}
  </li>
</template>