表单输入绑定

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 小时前
vue-plugin-hiprint打印高度不够,提示:没有足够空间,显示下方内容,问题处理方案及实操
前端·vue.js
狗头大军之江苏分军2 小时前
Node.js 原生功能越来越强,我们是不是被 npm 玩坏了?
前端·javascript·架构
独自破碎E2 小时前
TS7016: Could not find a declaration file for module ‘vue-router‘.解决办法
前端·javascript·vue.js
仰望星空@脚踏实地2 小时前
DataKit js-yaml和follow-redirects组件依赖影响分析
前端·datakit
Mr_fang719403 小时前
iframe 导致 Vue Router go(-1) 无法正常返回问题解决方案
前端
Drift_Dream3 小时前
Node.js 第二课:用核心模块构建你的第一个服务器
前端·后端
DEMO派3 小时前
首页图片懒加载实现方案解析
前端
采云 AI3 小时前
小程序订单接单超时时间功能解释
服务器·小程序·apache
用户952081611793 小时前
百度地图MapVThree Editor:地图编辑
前端