表单输入绑定

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" />
相关推荐
贵州数擎科技有限公司5 分钟前
霓虹沙尘暴的 Three.js 实现
前端·webgl
一只叁木Meow6 分钟前
电商 SKU 选择器:用算法实现优雅的用户交互
前端·javascript·算法
笔优站长9 分钟前
vue-sign-canvas v2 重构复盘:从 Vue 2 签名板到 Vue 3 + TypeScript 组件库
前端·vue.js
Aolith12 分钟前
事件驱动设计:我如何为校园论坛实现消息通知功能
前端·vue.js
代码煮茶13 分钟前
Vue3 Mock 数据实战 | 用 Mockjs + vite-plugin-mock 搭建前端独立开发环境
javascript·vue.js
JieE21214 分钟前
反转链表:从双指针到递归,吃透链表反转的核心逻辑
javascript·算法
yingyima14 分钟前
GitHub Actions 定时任务 schedule 踩坑实录:核心语法与实战技巧
前端
代码煮茶14 分钟前
CSS 单位完全指南:px、em、rem、vw、vh、clamp 详解
前端·css
KaMeidebaby18 分钟前
卡梅德生物技术快报|PROTAC 药物降解蛋白原理及数据库平台开发全流程
前端·数据库·其他·百度·新浪微博
IpdataCloud32 分钟前
企业IT管理中,如何通过IP地址查询定位快速溯源异常终端?用IP离线库实现
服务器·网络·数据库·tcp/ip