第 14 课2026.09.17
用计算属性从 number 输入派生范围校验结果。
第 14 课：校验数值输入范围
- 日期：2026-09-17
- 课程序号：第 14 课
- 知识点：校验数值输入范围
用途
用计算属性从 number 输入派生范围校验结果。
核心概念
原始 minutes 仍是单一事实源；computed 只派生是否合法。
最小代码或操作示例
text
const valid = computed(() => minutes.value >= 1 && minutes.value <= 60)
<input v-model.number="minutes" type="number" min="1" max="60">
<p v-if="!valid">请输入 1 到 60</p>3～5 分钟练习
把上限改为 90。
参考答案
同时把 computed 的 60 和 max 改为 90。
与上一课的联系
继承上一课的 v-model.number；本课只增加范围校验；下一课可阻止无效提交。
时效校验
时效校验：2026-09-17（Vue 3 当前官方指南）。已打开并核对下列官方资料；未发现本课主方案存在废弃标记。