表单输入绑定

1.简化代码

2.能绑定不同类型的值

3.修饰符

(1)lazy

默认情况下,v-model会在每次input事件后更新数据。使用.lazy后会变成每次change事件后更新数据。

javascript 复制代码
<!-- 在 "change" 事件后同步更新而不是 "input" -->
<input v-model.lazy="msg" />

(2)number

  • 想让用户输入自动转换为数字
javascript 复制代码
<input v-model.number="age" />
  • 如果该值无法被parseFloat()处理,将会返回原始值。(特别是当输入为空,例如用户清空字段之后,会返回一个空字符串)。
  • number修饰符会在输入框有type="number"时自动启动。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseFloathttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseFloat

(3)trim

去掉输入内容两端空格。

javascript 复制代码
<input v-model.trim="msg" />
相关推荐
an317421 分钟前
使用 LangGraph + DeepSeek 构建 AI 面试官:状态图设计与实践
前端·ai编程
代码不加糖2 分钟前
MessageChannel是什么,有什么使用场景?
前端·javascript
小小龙学IT6 分钟前
HTMX:让 HTML 重新成为前端核心的超轻量动态交互库
前端·html·交互
星栈7 分钟前
写 Makepad Demo 不难,难的是把它写成项目
前端·rust
用户059540174468 分钟前
localStorage清除策略踩坑实录:一个过期的token让我排查了3小时
前端·css
Nanachi10 分钟前
跨框架的前端源码定位,再加上点LLM
前端
人无远虑必有近忧!30 分钟前
fetch请求图片报跨域
前端·javascript
谢院柯31 分钟前
解决修改 node_modules 依赖库源码后重复安装问题的几种方案
前端
疯狂打码的少年33 分钟前
【程序语言与编译】NFA转DFA(子集构造法)
前端·笔记
半只小闲鱼35 分钟前
合并多个excel文件到一个文件中
前端·python·数据分析