Vue.js 中列表渲染`v-for`的十大常见的操作

1. 什么是 v-for？

• v-for 就像一个小魔法，让你可以根据一组数据生成很多相似的东西，比如一列任务、一组商品等等。
• 你可以把它想象成一个“循环”工具，它会帮你自动重复生成 HTML 元素。

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

这里的 v-for 就是让 <li> 标签重复很多次，每次显示不同的 item。

2. key 是什么？

• 每个 v-for 生成的元素都需要一个独一无二的“身份证”，这个身份证就是 key。
• key 帮助 Vue 更聪明地管理这些元素，知道哪个是哪个，尤其是在你删除或添加新元素时。

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

key="item.id" 意味着每个 item 都有一个 id 作为它的“身份证”。

3. v-for 可以用来循环数组

• 数组就是一堆有顺序的数据，比如 ["苹果", "香蕉", "橙子"]。
• 用 v-for 可以把每个水果名都生成一个 <li> 标签。

<ul>
  <li v-for="(fruit, index) in fruits" :key="index">{{ fruit }}</li>
</ul>

这里，fruits 是一个装满水果名字的数组，每个 fruit 都会出现在一个 <li> 标签里。

4. v-for 也可以用来循环对象

• 对象是一些属性和对应的值的集合，比如 {name: "苹果", color: "红色"}。
• v-for 可以遍历对象中的每一对属性和值。

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

这里，fruit 是一个对象，v-for 帮你把对象里的每一对 key 和 value 显示出来。

5. 在自定义组件中使用 v-for

• 你可以把 v-for 和自己的小组件（组件就像自制的小积木）结合起来，生成多个组件实例。

<fruit-item v-for="fruit in fruits" :key="fruit.id" :fruit="fruit"></fruit-item>

每个 fruit-item 组件都会根据 fruits 里的数据来生成。

6. 如何更新数组？

• 当你用 JavaScript 改变数组里的内容，比如添加、删除、排序时，Vue 会自动更新页面上的列表。

this.fruits.push("葡萄"); // 页面会自动显示新添加的“葡萄”

7. 可以对数组进行过滤或排序

• 你可以先挑选或排序列表里的数据，再用 v-for 显示出来。

<li v-for="fruit in sortedFruits" :key="fruit.id">{{ fruit.name }}</li>

<script>
export default {
  computed: {
    sortedFruits() {
      return this.fruits.sort(); // 按字母顺序排序
    }
  }
}
</script>

8. v-for 和 v-if 的关系

• v-if 是另一个小魔法，用来判断某个东西是否显示。
• 如果 v-for 和 v-if 同时用在一个标签上，v-for 先执行，这意味着 Vue 先生成列表，然后再决定显示哪些。

<li v-for="fruit in fruits" v-if="fruit.isAvailable" :key="fruit.id">{{ fruit.name }}</li>

9. 给空列表加提示

• 当你的列表是空的时候，通常会提示用户“没有数据”之类的消息。

<div v-if="fruits.length === 0">没有水果</div>
<ul v-else>
  <li v-for="fruit in fruits" :key="fruit.id">{{ fruit.name }}</li>
</ul>

10. 避免过度嵌套的 v-for

• 虽然你可以在一个循环里嵌套另一个循环，但尽量避免这样做，因为这样代码会变得复杂难懂。

<div v-for="group in fruitGroups" :key="group.name">
  <div v-for="fruit in group.items" :key="fruit.id">{{ fruit.name }}</div>
</div>