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

相关推荐
℘团子এ1 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z7 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴10 分钟前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
前端百草阁30 分钟前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜30 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
Backstroke fish32 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
zwjapple32 分钟前
typescript里面正则的使用
开发语言·javascript·正则表达式
小五Five33 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript
临枫54134 分钟前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
RAY_CHEN.34 分钟前
vue3 pinia 中actions修改状态不生效
vue.js·typescript·npm