第 12 课2026.09.15
在双向绑定时去掉输入首尾空白，减少提交前重复处理。
第 12 课：v-model.trim清理输入
- 日期：2026-09-15
- 课程序号：第 12 课
- 知识点：v-model 修饰符 trim
用途
在双向绑定时去掉输入首尾空白，减少提交前重复处理。
核心概念
v-model.trim 在同步文本输入时应用 trim；原始业务状态仍由 ref 持有。
最小代码或操作示例
vue
<script setup>
import { ref } from 'vue'
const title = ref('')
</script>
<template><input v-model.trim="title"><p>{{ title }}</p></template>3～5 分钟练习
增加 .lazy，观察更新时机。
参考答案
使用 v-model.trim.lazy="title"，状态在 change 而非每次 input 时更新。
与上一课的联系
继承上一课的 v-model 输入状态；本课只增加 trim 修饰；下一课可用 number 修饰处理数值。
时效校验
时效校验：2026-09-15（Vue 3 当前官方指南）。已打开并核对下列官方文档；示例未使用已废弃接口。