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

el-input设置type=‘number‘和v-model.number的区别

news 来源：原创 2024/9/18 23:50:46

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修饰符
在这里插入图片描述

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • Longman Dictionary of Contemporary English (朗文当代高级英语辞典)
  • 【ARM】Trustzone和安全架构
  • golang学习笔记18——golang 访问 mysql 数据库全解析
  • Amoco：一款针对二进制源码的安全分析工具
  • HC-SR04超声波传感器详解（STM32）
  • scantf
  • k8s介绍及部署
  • 【Kubernetes】常见面试题汇总（二十四）
  • PWN二进制安全修仙秘籍【第一章#工具篇01】WLS配置tmux分屏、oh-my-zsh命令补全
  • SOCKS4和SOCKS5的区别是什么？
  • Redis Universe: 探索无边界的数据处理星系
  • 上线跨境电商商城的步骤
  • 百度起诉知名站长工具5118
  • SEAFARING靶场漏洞攻略
  • STM32中的计时与延时
  • Angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？
  • Angular 响应式表单 基础例子
  • ERLANG 网工修炼笔记 ---- UDP
  • Fabric架构演变之路
  • IDEA 插件开发入门教程
  • linux安装openssl、swoole等扩展的具体步骤
  • Material Design
  • spring security oauth2 password授权模式
  • vue中实现单选
  • 飞驰在Mesos的涡轮引擎上
  • 技术胖1-4季视频复习— (看视频笔记)
  • 聊聊flink的BlobWriter
  • 如何借助 NoSQL 提高 JPA 应用性能
  • 实战：基于Spring Boot快速开发RESTful风格API接口
  • 提醒我喝水chrome插件开发指南
  • 微信小程序--------语音识别（前端自己也能玩）
  • 小程序开发中的那些坑
  • 一个SAP顾问在美国的这些年
  • MiKTeX could not find the script engine ‘perl.exe‘ which is required to execute ‘latexmk‘.
  • ​ 轻量应用服务器：亚马逊云科技打造全球领先的云计算解决方案
  • ​力扣解法汇总946-验证栈序列
  • ‌前端列表展示1000条大量数据时，后端通常需要进行一定的处理。‌
  • #100天计划# 2013年9月29日
  • #Linux杂记--将Python3的源码编译为.so文件方法与Linux环境下的交叉编译方法
  • (06)Hive——正则表达式
  • (C++哈希表01)
  • （附源码）小程序儿童艺术培训机构教育管理小程序 毕业设计 201740
  • （黑马出品_高级篇_01）SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式
  • （删）Java线程同步实现一：synchronzied和wait()/notify()
  • (十五)使用Nexus创建Maven私服
  • （四）linux文件内容查看
  • （四）搭建容器云管理平台笔记—安装ETCD(不使用证书)
  • (四)进入MySQL 【事务】
  • （一）80c52学习之旅-起始篇
  • （一）python发送HTTP 请求的两种方式(get和post )
  • (原)本想说脏话,奈何已放下
  • (原創) 如何安裝Linux版本的Quartus II? (SOC) (Quartus II) (Linux) (RedHat) (VirtualBox)
  • (转)AS3正则：元子符,元序列,标志,数量表达符
  • .jks文件（JAVA KeyStore）
  • .NET Core中的去虚