el-input设置type=‘number‘和v-model.number的区别

el-input设置type='number'与设置.number修饰符的区别

1. 设置type='number'

使用el-input时想收集数字类型的数据,我们首先会想到type=number,设置完type为number时会限制我们输入的内容只能为数字,不能为字符/汉字等非数字类型的数值,但打印数据时会发现,我们虽然只输入了数字,但打印出来的数据类型依然是字符串

例如:

这里我封装了一个组件

打印出来的val类型是字符串

结论:设置type='number'可以限制输入的类型只能是Number,但得到的数值类型为String

2. 设置.number修修饰符

结论:如果是非数字开头则为String类型,如果是数字开头则会限制输入类型为Number,且得到的数值类型为Number

因此:如果想要el-input实现限制输入类型为Number类型,收集的数据类型也为Number类型,那么既要设置type为'number',也要设置.number修饰符

相关推荐
xixixin_2 小时前
【vue】中字符串与数组转换:为何首选 Computed 而非 Methods?
前端·javascript·vue.js
i_am_a_div_日积月累_2 小时前
el-drawer注册全局点击事件无效;el-dialog注册全局点击事件无效
javascript·vue.js·elementui
啥都不懂的小小白2 小时前
Vue第四篇:组件通信 + DOM 更新 + 过渡动画
vue.js·全局事件通信
向下的大树2 小时前
VUE父子组件传参中的触发时机问题:异步场景下的解决方案
前端·javascript·vue.js
英俊潇洒美少年2 小时前
vue2中使用节流防抖函数时,使用的vue状态始终是初始化的数据
前端·javascript·vue.js
棒棒的唐3 小时前
适合小程序使用的将对象数组转换为参数字符串方法
前端·javascript·小程序
刘一说3 小时前
Vue3响应式原理重构:从Object.defineProperty到Proxy的革命性升级
javascript·vue.js·重构
一位搞嵌入式的 genius3 小时前
深入理解 JavaScript 原型与继承:从基础到进阶
开发语言·前端·javascript
董世昌413 小时前
深度解析var、let、const的区别与最佳使用场景
开发语言·前端·javascript
C_心欲无痕3 小时前
Next.js 平行路由:构建模块化动态布局
开发语言·前端·javascript