第 11 课2026.09.14
把输入框内容同步到响应式变量，用于预览、校验和提交。
第 11 课：v-model双向绑定输入
- 日期：2026-09-14
- 课程序号：第 11 课
- 知识点：表单输入与响应式状态
用途
把输入框内容同步到响应式变量，用于预览、校验和提交。
核心概念
v-model 组合了值绑定和输入事件；数据仍由响应式状态统一持有。
最小代码或操作示例
vue
<script setup>
import { ref } from "vue"
const title = ref("")
</script>
<template>
<input v-model="title">
<p>{{ title }}</p>
</template>3～5 分钟练习
增加 placeholder，并显示字符数。
参考答案
输入框加 placeholder="课程名"，文本写 {{ title.length }}。
与上一课的联系
上一课用 watch 管理和清理副作用；本课处理无需副作用的直接输入状态。
时效校验
时效校验：2026-09-15（Vue 3 当前官方指南）。已复核本课用法，未发现废弃标记；本轮官方资料见下方链接。