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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/52804.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

房产销售系统开发:SpringBoot技术要点

摘 要 随着科学技术的飞速发展,各行各业都在努力与现代先进技术接轨,通过科技手段提高自身的优势;对于房产销售系统当然也不能排除在外,随着网络技术的不断成熟,带动了房产销售系统,它彻底改变了过去传统的…

基于Prometheus和Grafana的现代服务器监控体系构建

构建基于Prometheus和Grafana的现代服务器监控体系是一个非常有效的方式来监控服务器性能、资源利用率和应用程序健康状况。以下是一些步骤和指南,帮助您构建这样一个监控体系: 1. **安装和配置Prometheus**: - 下载并安装Prometheus&…

性能诊断的方法(五):架构和业务诊断

关于性能诊断的方法,我们可以按照“问题现象—直接原因—问题根源”这样一个思路去归纳。我们先从问题的现象去入手,包括时间的分析、资源的分析和异常信息的分析。接下来再去分析产生问题现象的直接原因是什么,这里我们归纳了自上而下的资源…

外观模式详解:如何为复杂系统构建简洁的接口

🎯 设计模式专栏,持续更新中 欢迎订阅:JAVA实现设计模式 🛠️ 希望小伙伴们一键三连,有问题私信都会回复,或者在评论区直接发言 外观模式 外观模式(Facade Pattern)为子系统中的一组…

linux系统安装miniconda3

一、下载minconda3 下载地址:https://docs.conda.io/en/latest/miniconda.html 一般国内访问比较困难,可到清华软件镜像站 Index of /anaconda/miniconda/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 需要特别注意自己的下载版本和自己的…

初识爬虫2

requests学习: 小技巧,如果你用的也是pycharm,对于控制台输出页面因为数据很长一行,不方便进行查看, 可以让它自动换行: 1.requests文档阅读学习链接:快速上手 — Requests 2.18.1 文档 需掌…

如何利用 Redis 列表实现一个简单的任务调度系统?

以下是利用 Redis 列表实现一个简单任务调度系统的步骤: 一、任务存储 定义任务格式 每个任务可以是一个包含任务相关信息的字符串或者 JSON 对象。例如,任务可以包含任务 ID、任务执行的函数名、执行参数、执行时间等信息。例如,一个简单的任务可以表示为{"id":…

【运维监控】Prometheus+grafana监控zookeeper运行情况

运维监控系列文章入口:【运维监控】系列文章汇总索引 文章目录 一、prometheus二、grafana三、prometheus集成grafana监控zookeeper1、修改zookeeper配置2、修改prometheus配置3、导入grafana模板4、验证 本示例通过zookeeper自带的监控信息暴露出来,然后…

基于imx6ull平台opencv的图像采集和显示屏LCD显示功能(带Qt界面)

目录 一、概述二、环境要求2.1 硬件环境2.2 软件环境三、开发流程3.1 编写测试3.2 验证功能一、概述 本文档是针对imx6ull平台opencv的图像采集和显示屏LCD显示功能,创建Qt工程,在工程里面通过点击按钮,实现opencv通过摄像头采集视频图像,将采集的视频图像送给显示屏LCD进…

LabVIEW编程快速提升的技术

在LabVIEW程序员的成长过程中,很多技术和概念看似简单、常用,但真正掌握并能熟练运用,往往需要踏踏实实的实践与积累。没有什么是能够一蹴而就的,唯有通过不断的专注与深入,才能获得显著的提升。要想在LabVIEW开发上取…

SSM框架学习(三、MyBatis实践:提高持久层数据处理效率)

目录 一、Mybatis简介 1.简介 2.持久层框架对比 3.快速入门(基于Mybatis3方式) 4.ibatis方式的实现和原理 5.ibatis与mybatis之间的关系 二、Mybatis基本使用 1.向 sql 语句传参 (1)mybatis日志输出配置 (2&…

为什么矩阵特征值之和等于主对角线元素之和,特征值乘积等于行列式值

首先给出特征值和特征向量的定义。 设A是n阶矩阵,如果数λ和n维非零向量x使关系式 Axλx (1) 成…

JavaScript知识点3

目录 1.JavaScript中有多少个线程? 2.如何判断一个对象是不是空对象? 3.什么事JavaScript时间死区? 4.什么是JSON stringify? 1.JavaScript中有多少个线程? JavaScript中的主线程负责执行代码、处理事件和更新用户…

最大余额法,解决百分比计算相加不等于100%(扇形/饼图百分比使用的此算法)

在开发项目的过程中有时候需要进行计算百分比,例如计算饼状图百分比。有时候在计算的过程中常规四舍五入计算会发生所有计算的值相加不等于100%的情况 这是 get_percent_value 函数的 JavaScript 版本: /*** 最大余额法,解决百分比计算相加不…

什么是蜘蛛池?有什么作用

在网络爬虫的世界里,蜘蛛池(Spider Pool)是一个专门用于管理和维护大量爬虫的系统。它为爬虫提供了一个集中的工作环境,使得爬虫能够更高效、更稳定地进行数据抓取。本文将探讨蜘蛛池的概念、组成以及它在现代网络爬虫技术中的作用…

微信小程序使用canvas画图保存图片到手机相册

微信小程序要实现使用canvas绘制一个图&#xff0c;然后保存到手机相册 **最终效果&#xff1a;**实现生成以下图片 一、初始化canvas // wxml页面设置canvas标签 <canvas style"width: {{windowW}}px; height: {{windowH}}px;" disable-scrolltrue canvas-id&…

llvm后端之函数栈帧

llvm后端之函数栈帧 引言1 目标扩展实现1.1 emitPrologue和emitEpilogue1.2 storeRegToStackSlot和loadRegFromStackSlot 2 寄存器存栈与恢复 引言 llvm后端在物理寄存器分配后、指令发射前会调用PEI这个pass来生成函数栈帧的创建与销毁。 1 目标扩展实现 在target下&#x…

使用PyTorch进行图像风格迁移:基于VGG19实现

图像风格迁移&#xff08;Neural Style Transfer, NST&#xff09;是深度学习中一个令人着迷的应用&#xff0c;它能够将一张图像的风格应用到另一张图像上。例如&#xff0c;能够将梵高的画风应用到一张普通照片上。本文将详细解释如何使用PyTorch进行风格迁移&#xff0c;逐步…

解决el-table排序sortable只排序当前页问题

el-table-column中添加sortable只是让每页数据单独排序&#xff0c;没有把所有数据进行排序&#xff0c;可以通过sort-change事件解决。 1、首先在需要排序的列上加sortable“custom” <el-table-columnprop"date"label"日期"width"180"sort…

C++(2)之Linux多线程服务端编程总结

C之Linux多线程服务端编程读书笔记 Author: Once Day Date: 2023年1月31日/2024年8月23日 一位热衷于Linux学习和开发的菜鸟&#xff0c;试图谱写一场冒险之旅&#xff0c;也许终点只是一场白日梦… 漫漫长路&#xff0c;有人对你微笑过嘛… 全系列文章可参考专栏: Linux实践…