列表、条件渲染与表单

你将学会什么

用 v-for 渲染列表并正确使用 :key
用 v-if 根据状态切换显示
用 @click 绑定事件、用 v-model 双向同步表单

正文

Vue3 最常用的两个基础能力，一个是 v-for，一个是 v-if。学生项目里最常见的需求是“渲染一个任务列表，并且根据完成状态显示不同样式”。最小可运行的写法是：

<script setup lang="ts">
import { ref } from 'vue'

const items = ref([
  { id: 1, text: '完成课程阅读', done: true },
  { id: 2, text: '提交实验报告', done: false },
])
</script>

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <span :style="{ textDecoration: item.done ? 'line-through' : 'none' }">
        {{ item.text }}
      </span>
    </li>
  </ul>
</template>

v-for 负责把数组渲染成列表，:key 是每个条目的稳定标识，Vue 靠它高效复用和更新元素，漏掉会导致更新异常。事件绑定则比传统 DOM 写法更直接：@click、@input、@submit 就能把用户行为和组件状态连起来。如果你要做课程作业里的表单，可以这样起步：

<script setup lang="ts">
import { ref } from 'vue'

const name = ref('')
</script>

<template>
  <form @submit.prevent>
    <input v-model="name" placeholder="输入你的名字" />
    <p>你好，{{ name || '同学' }}</p>
  </form>
</template>

v-model 是 Vue3 表单开发里最值得先掌握的语法糖，它能把输入框值和响应式变量双向同步；@submit.prevent 则阻止表单提交后的页面刷新。这种写法已经是很多学生作业和课程展示页的最小交互单元。

动手练

知识检查

先自己回答，再看答案：

v-for 为什么必须搭配 :key？
v-model 的作用是什么？
@submit.prevent 里的 .prevent 是做什么的？

参考答案

:key 是条目的稳定标识，Vue 靠它高效复用元素并正确更新列表。
把输入框的值和响应式变量双向同步，输入即更新状态。
.prevent 阻止表单默认的提交刷新行为，让逻辑留在组件里处理。

本节小结

v-for 渲染列表必须带 :key
@click 等事件绑定把用户行为和组件状态连起来
v-model 是表单双向绑定的核心语法糖

列表与表单小测

1 / 3

v-for 渲染列表时，必须给条目提供什么？

:keyv-modelclass 属性style 属性