Vue基础教程（45）内置指令之v-for：Vue的“印钞机”：v-for指令深度防翻车指南！从列表渲染到性能优化，附实战代码让你爽到飞起！

嘿，伙计！是时候告别“复制粘贴”的苦力时代了！

想象一下这个场景：产品经理甩给你一个需求——“这个用户列表，后台返回多少条，你就给我显示多少条！” 你看着设计稿上那20个用户信息卡，脑子里已经开始盘算：一个<div>写20遍？要是100条呢？1000条呢？怕不是要复制到手指抽筋？

别慌！Vue.js早就看穿了一切，它为你准备了一把神器——v-for指令。这玩意儿不是什么高深莫测的黑魔法，它本质上就是你代码界的“印钞机”！你只需要给它一个“模板”（一张钞票母版）和一个“数据源”（印多少钞票的指令），它就能“唰唰唰”地给你印出一整套完整的UI列表。

今天，咱们就抛开那些枯燥的官方文档，用一场有趣的“印钞之旅”，把v-for里里外外扒个干净！

第一章：初识“印钞机”——v-for的基本操作

1.1 语法格式：记住这个万能公式！

v-for的语法长得很有规律，就像一套固定口令：

<要重复的HTML标签 v-for=“(每一项的数据, 每一项的索引) in 数据源” :key=“唯一的标识”>
  <!-- 在这里，你可以使用“每一项的数据”和“索引” -->
</要重复的HTML标签>

• 数据源：这就是你的“印钞指令”，可以是一个数组、一个对象，甚至是一个数字！告诉v-for：“嘿，照着这个源数据开始印！”
• 每一项的数据：这是当前正在印刷的这张“钞票”对应的数据。你可以给它起任何名字，比如item, product, user，怎么顺口怎么来。
• 每一项的索引（可选）：这是当前“钞票”的印刷编号（从0开始）。有时候你需要知道它是第几个，比如做排序的时候。
• :key：这是重中之重，是v-for的“防伪标识”！我们后面会重点讲，现在你先记住，它必须得有，而且值必须是唯一的！

1.2 实战演练：从“工资条”到“冰箱贴”

光说不练假把式，直接上代码最实在！

示例1：打印你的“愿望工资条”（遍历数组）

假设你有一个梦想中的月薪数组，咱们把它渲染出来！

<template>
  <div id="app">
    <h3>我的梦想月薪清单：</h3>
    <ul>
      <!-- 使用 v-for 遍历 salaries 数组 -->
      <li v-for="(salary, index) in salaries" :key="index">
        第 {
  
  { index + 1 }} 个月，我希望赚到：<strong>{
  
  { salary }}元</strong>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      salaries: [30000, 50000, 80000, 100000] // 数据源：梦想还是要有的！
    };
  }
};
</script>