Element el-input-number 计数器详解
点此查看全部文字教程、视频教程、源代码
本文目录
- 1. 用途
- 2. 基本用法
- 3. 指定最大、最小值
- 4. 监控数值变化
- 5. 自定义步数
- 6. 自定义精度
- 7. 调整按钮位置
- 8. 小结
1. 用途
计数器是一种特殊的输入框,用来输入数字。除了可以直接键盘输入外,还支持通过按钮对数字进行调整。
2. 基本用法
如下示例,计数器显示数字绑定变量后,可以直接通过+/-按钮调整数值。
基本用法<el-input-number v-model="num1" label="请输入数量"></el-input-number><el-divider></el-divider>
效果:
3. 指定最大、最小值
可以为计数器指定数值的最大、最小值,当到达最大、最小值时,相应按钮被禁用。
指定最大、最小值<el-input-number v-model="num2" :min="1" :max="10" label="请输入数量"></el-input-number><el-divider></el-divider>
效果:
4. 监控数值变化
可以通过@change
方法监控计数器的数值变化事件。
监控输入变化<el-input-number v-model="num3" @change="numChange"></el-input-number><el-divider></el-divider>
methods: {numChange(value) {console.log(value);}}
5. 自定义步数
可以自定义每次点击点击按钮数字变化量,即步数
,如下代码每次点击加号,则增大3。
自定义步数<el-input-number v-model="num4" :step="3"></el-input-number><el-divider></el-divider>
6. 自定义精度
可以指定数据的精度。
自定义精度<el-input-number v-model="num5" :step="0.01" :precision="2"></el-input-number><el-divider></el-divider>
7. 调整按钮位置
按钮位置可以调整到输入框右侧,但是不支持调整到左侧等其他位置。
调整按钮位置<el-input-number v-model="num6" controls-position="right"></el-input-number><el-divider></el-divider>
8. 小结
计数器功能完善,足以支持绝大多数对数字输入的需求。
Element el-input-number 计数器详解相关推荐
- java中的getnumber怎么用_java安全编码指南之:Number操作详解
简介 java中可以被称为Number的有byte,short,int,long,float,double和char,我们在使用这些Nubmer的过程中,需要注意些什么内容呢?一起来看看吧. Numb ...
- python的raw_ input是什么意思-对python中raw_input()和input()的用法详解
最近用到raw_input()和input()来实现即时输入,就顺便找了些资料来看,加上自己所用到的一些内容,整理如下: 1.raw_input() raw_input([prompt]) -> ...
- python中str和input_对python中raw_input()和input()的用法详解
最近用到raw_input()和input()来实现即时输入,就顺便找了些资料来看,加上自己所用到的一些内容,整理如下: 1.raw_input() raw_input([prompt]) -> ...
- el表达式ne什么意思_JSP中EL表达式的用法详解(必看篇)
EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} 所有EL都是以${ ...
- ABB机器人系统输入输出信号System Input和Output详解(一)
ABB机器人系统输入输出信号System Input和Output详解 System Input类型: 输入I/O信号可指定具体的系统输入项,比如Start或Motors on.该输入项会在不使用Fl ...
- ABB机器人系统输入输出信号System Input和Output详解(二)
ABB机器人系统输入输出信号System Input和Output详解(二) 上一次和大家分享了系统输入信号System Input相关的内容,具体可参考以下链接中的内容: ABB机器人系统输入输出信 ...
- EL表达式 JSTL(详解)
相关JSTL.EL博客收集如下: JSTL 标签大全详解:http://blog.csdn.net/qq_25827845/article/details/53311722 EL表达式详解:http: ...
- 海思3518E开发笔记2.5——海思VI(video input)模块详解
目录 海思video input模块架构介绍 海思video input模块功能介绍 结构体说明 函数调用关系 流程分析 step 1: mipi configure step 2: configur ...
- Element el-upload上传组件详解
upload上传是前端开发很常用的一个功能,在Vue开发中常用的Element组件库也提供了非常好用的upload组件. 基本用法 代码: <el-upload :action="up ...
- MapReduce计数器--详解
1.MapReduce计数器是什么? 计数器是用来记录job的执行进度和状态的.它的作用可以理解为日志.我们可以在程序的某个位置插入计数器,记录数据或者进度的变化情况. 2.MapReduce计数器能 ...
最新文章
- 咱们从头到尾说一次 Java 垃圾回收
- 点云配准网络 PCRNet: Point Cloud Registration Network using PointNet Encoding 2019
- display: none;、visibility: hidden、opacity=0区别总结
- openstack nova 源码分析3-nova目录下的service.py
- 009_Get请求中文乱码
- 【每周CV论文】深度学习文本检测与识别入门必读文章
- 用什么来代替switch_一根转动的圆筒能有什么用?可以用它来代替机翼、船帆
- 如何修改以前登录过的共享文件夹的用户名和密码以及查看或删除浏览器里保存的密码...
- jquery的$.each和$().each
- LINUX 对引导加密
- 机械制图及计算机绘图技能实训,机械制图测绘与CAD技能实训(二)
- 中小企业上云多地域办公组网,建立高质量云上内网环境
- 苹果也“翻车”,服务器大面积宕机三小时
- nginx历史版本下载链接
- AOP日志组件 多次获取post参数
- 【小程序】前端微信授权登录
- Redis-使用redis-trib构建集群
- 第五节:蜂鸣器的驱动程序
- 【马司机带带我】君子日三省吾身
- 精通CSS与HTML设计模式 第一章(轻松搞定CSS)