【element-ui】输入框组件el-input输入数字/输出Number类型:type=“number“、v-model.number用法

输入框组件el-input输入数字/输出Number类型

1、基础用法

  • 输入:任何文本 → 输出:String类型
html 复制代码
<el-input v-model="inputText"></el-input>
<!-- 
输入 abc ------ inputText输出 "abc"
输入 123 ------ inputText输出 "123"
输入 a1b2c3 ------ inputText输出 "a1b2c3"
-->

2、type="number"

  • 输入:仅限数字 → 输出:String类型
html 复制代码
<el-input type="number" v-model="inputText"></el-input>
<!-- 
输入 abc ------ inputText输出 ""
输入 123 ------ inputText输出 "123"
输入 a1b2c3 ------ inputText输出 "123"
-->

3、.number

  • 输入:全数字 → 输出:Number类型
  • 输入:其他文本 → 输出:String类型
html 复制代码
<el-input v-model.number="inputText"></el-input>
<!-- 
输入 abc ------ inputText输出 "abc"
输入 123 ------ inputText输出 123
输入 a1b2c3 ------ inputText输出 "a1b2c3"
-->

4、type="number" + .number

  • 输入:仅限数字 → 输出:Number类型
html 复制代码
<el-input type="number" v-model.number="inputText"></el-input>
<!-- 
输入 abc ------ inputText输出 ""
输入 123 ------ inputText输出 123
输入 a1b2c3 ------ inputText输出 123
-->
相关推荐
王哈哈^_^1 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具3 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161774 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test4 小时前
js下载excel示例demo
前端·javascript·excel
Yaml44 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事4 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶4 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json