Vue 3教程 - v-for

v-for基本用法

首先需要定义/获取数据，比如：

data() {
  return {
    students: [
      {id: '9901', name: 'Paul'},
      {id: '9902', name: 'Jessie'},
      {id: '9903', name: 'Lucas'},
    ]
  }
},

然后使用v-for进行遍历

<ul>
  <li v-for="student in students" :key="student.id">
    {{ student.id }} - {{ student.name }}
  </li>
</ul>

也可以在遍历时使用索引：

<ul>
  <li v-for="(student, index) in students" :key="student.id">
    {{ index }}: {{ student.id }} - {{ student.name }}
  </li>
</ul>

在使用v-for的时候，一定要添加:key，否则在操作数据时可能造成混乱。

v-for和v-if的结合使用

在默认情况下，v-for和v-if是不能同时使用的。其原因在于：v-if会先被调用，但如果其中引用的变量值源自v-for，可能还没有被赋值，因此无法访问。如果想要结合，只能将它们放在不同级别：

<template v-for="(student, index) in students" :key="student.id">
  <div v-if="student.registered === 'registered'">
    {{ index }}: {{ student.id }} - {{ student.name }}
  </div>  
</li>

其实最好的方式是使用computed props，也就是说先把数据处理好了再进行渲染。