表单输入绑定

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" />
相关推荐
小码哥_常2 分钟前
从“新老交锋”看Retrofit与Ktor
前端
小J听不清25 分钟前
CSS 外边距(margin)全解析:取值规则 + 实战用法
前端·javascript·css·html·css3
还是大剑师兰特1 小时前
Stats.js 插件详解及示例(完全攻略)
前端·大剑师·stats
前端小超超1 小时前
Vue计算属性computed:可写与只读的区别
前端·javascript·vue.js
IT_陈寒1 小时前
SpringBoot实战:3个隐藏技巧让你的应用性能飙升50%
前端·人工智能·后端
weixin199701080161 小时前
唯品会商品详情页前端性能优化实战
前端·性能优化
minji...2 小时前
Linux 库制作与原理(三)深入动静态链接原理
linux·运维·服务器·c++
爱学习的程序媛2 小时前
【Web前端】Pinia状态管理详解
前端·vue.js·typescript
爱学习的程序媛2 小时前
“数字孪生”详解与前端技术栈
前端·人工智能·计算机视觉·智慧城市·信息与通信
海石2 小时前
微信小程序开发02:原始人也能看懂的着色器与视频处理
前端·微信小程序·视频编码