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修饰符

相关推荐
Highcharts.js2 小时前
常见报错排雷指南2:导出失败的官方解法
javascript·react.js·ecmascript·highcharts·可视化图表·导出模块失败·导出服务
梦想平凡2 小时前
百游棋牌源代码开发搭建教程(五):房间创建、座位分配与请求幂等实现
前端·javascript·数据库·源代码管理
杨芋爽4 小时前
管理后台列表页为什么一直转圈?从一次 1+N 请求扇出聊聊前端性能优化
javascript
_山海5 小时前
Bun入门指南
前端·javascript·后端
2301_32241428045 小时前
活力孕康复APP 47737- 原创(免费领源码+部署教程+开发环境)
java·vue.js·spring boot·mysql·微信小程序·idea·微信开发者工具
YHL5 小时前
🎯 JavaScript 单例模式(Singleton Pattern)—— 从理论到实战
javascript·设计模式
vx_Biye_Design6 小时前
springboot游泳馆系统93765-计算机课程设计、毕业设计
java·javascript·spring boot·后端·python·spring·课程设计
晴天166 小时前
VSCodium 项目介绍
前端·javascript·vscode
世岩清上6 小时前
展厅数字内容同质化严重,怎样打造专属叙事风格?
大数据·前端·javascript·人工智能·html·音视频·展厅改造