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

相关推荐
ssshooter1 小时前
看完就懂 useSyncExternalStore
前端·javascript·react.js
Live000002 小时前
在鸿蒙中使用 Repeat 渲染嵌套列表,修改内层列表的一个元素,页面不会更新
前端·javascript·react native
柳杉3 小时前
使用Ai从零开发智慧水利态势感知大屏(开源)
前端·javascript·数据可视化
球球pick小樱花3 小时前
游戏官网前端工具库:海内外案例解析
前端·javascript·css
前端Hardy3 小时前
干掉 Virtual DOM?尤雨溪开始"强推" Vapor Mode?
vue.js·vue-router
喝水的长颈鹿3 小时前
【大白话前端 02】网页从解析到绘制的全流程
前端·javascript
用户14536981458783 小时前
VersionCheck.js - 让前端版本更新变得简单优雅
前端·javascript
codingWhat3 小时前
整理「祖传」代码,就是在开发脚手架?
前端·javascript·node.js
码路飞3 小时前
写了个 AI 聊天页面,被 5 种流式格式折腾了一整天 😭
javascript·python