当前位置： 首页 > article >正文

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

article 2024/11/19 13:17:39

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

1、基础用法

  • 输入：任何文本 → 输出：String类型
<el-input v-model="inputText"></el-input>
<!-- 
输入 abc —— inputText输出 "abc"
输入 123 —— inputText输出 "123"
输入 a1b2c3 —— inputText输出 "a1b2c3"
-->

2、type="number"

  • 输入：仅限数字 → 输出：String类型
<el-input type="number" v-model="inputText"></el-input>
<!-- 
输入 abc —— inputText输出 ""
输入 123 —— inputText输出 "123"
输入 a1b2c3 —— inputText输出 "123"
-->

3、.number

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

4、type="number" + .number

  • 输入：仅限数字 → 输出：Number类型
<el-input type="number" v-model.number="inputText"></el-input>
<!-- 
输入 abc —— inputText输出 ""
输入 123 —— inputText输出 123
输入 a1b2c3 —— inputText输出 123
-->

http://www.kler.cn/a/231668.html

相关文章：

  • DQN系列算法详解
  • 深入探索Scala迭代器：实用技巧与最佳实践
  • nodejs+mysql+vue3 应用实例剖析
  • 深度解读混合专家模型（MoE）：算法、演变与原理
  • 【开源免费】基于SpringBoot+Vue.JS购物推荐网站（JAVA毕业设计）
  • docker 安装之 windows安装
  • 【实训】自动运维ansible实训（网络管理与维护综合实训）
  • Javascript第十二个知识点：Dom
  • 前端开发：（三）CSS入门
  • 【GAMES101】Lecture 17 材质
  • MySQL进阶查询篇(2)-索引的优化和使用场景
  • C语言什么是悬空指针？
  • 6.electron之上下文隔离，预加载JS脚本
  • Windows搭建Emby媒体库服务器，无公网IP远程访问本地影音文件
  • MySQL数据库基础与SELECT语句使用梳理
  • DC-7靶机渗透详细流程
  • 案例分享：频域与时域仿真的区别
  • 机器学习1一knn算法
  • 如何使用phpStudy搭建网站并结合内网穿透远程访问本地站点
  • @RequestBody、@RequestParam、@RequestPart使用方式和使用场景
  • 线程之间如何通信？
  • 制作jdk17+pinpoint-agent基础镜像
  • Unity类银河恶魔城学习记录4-1，4-2 Attack Logic，Collider‘s collision excepetion源代码 P54 p55
  • Rust开发WASM，浏览器运行WASM
  • 虚继承 -- 解决菱形继承问题以及无法跨继承访问
  • 【flink状态管理（四）】MemoryStateBackend的实现