表单输入绑定

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" />
相关推荐
niucloud-admin7 小时前
web 端前端
前端
张太行_7 小时前
Linux静态库:多模块高效管理
linux·运维·服务器
ID_180079054738 小时前
YouTube item_get_video接口认证方式:API密钥与OAuth2.0的选择与应用
服务器·windows·microsoft
wgl6665208 小时前
Linux---基础IO!
linux·运维·服务器
Ancelin安心8 小时前
kali-dirsearch的使用
linux·运维·服务器·python·计算机网络·web安全·网络安全
jun_bai9 小时前
python+Java的网盘程序升级版。无感知备份文档,保护数据资产利器。
运维·服务器
上海云盾-高防顾问9 小时前
筑牢网络防线:境外恶意网址与IP防范指南
服务器·网络·安全
摘星编程9 小时前
React Native for OpenHarmony 实战:Linking 链接处理详解
javascript·react native·react.js
胖者是谁10 小时前
EasyPlayerPro的使用方法
前端·javascript·css
EndingCoder10 小时前
索引类型和 keyof 操作符
linux·运维·前端·javascript·ubuntu·typescript