Element InputNumber计数器的使用方法


Posted in Javascript onJuly 27, 2020

组件—计数器

基础用法

Element InputNumber计数器的使用方法

<template>
 <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
</template>
<script>
 export default {
 data() {
  return {
  num: 1
  };
 },
 methods: {
  handleChange(value) {
  console.log(value);
  }
 }
 };
</script>

禁用状态

Element InputNumber计数器的使用方法

<template>
 <el-input-number v-model="num" :disabled="true"></el-input-number>
</template>
<script>
 export default {
 data() {
  return {
  num: 1
  }
 }
 };
</script>

步数

Element InputNumber计数器的使用方法

<template>
 <el-input-number v-model="num" :step="2"></el-input-number>
</template>
<script>
 export default {
 data() {
  return {
  num: 5
  }
 }
 };
</script>

严格步数

Element InputNumber计数器的使用方法

<template>
 <el-input-number v-model="num" :step="2" step-strictly></el-input-number>
</template>
<script>
 export default {
 data() {
  return {
  num: 2
  }
 }
 };
</script>

精度

Element InputNumber计数器的使用方法

<template>
 <el-input-number v-model="num" :precision="2" :step="0.1" :max="10"></el-input-number>
</template>
<script>
 export default {
 data() {
  return {
  num: 1
  }
 }
 };
</script>

尺寸

Element InputNumber计数器的使用方法

<template>
 <el-input-number v-model="num" :precision="2" :step="0.1" :max="10"></el-input-number>
</template>
<script>
 export default {
 data() {
  return {
  num: 1
  }
 }
 };
</script>

按钮位置

Element InputNumber计数器的使用方法

<template>
 <el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
</template>
<script>
 export default {
 data() {
  return {
  num: 1
  };
 },
 methods: {
  handleChange(value) {
  console.log(value);
  }
 }
 };
</script>

Attributes

Element InputNumber计数器的使用方法Events

Element InputNumber计数器的使用方法Methods

Element InputNumber计数器的使用方法

在使用InputNumber 计数器时遇到的问题

自己遇到的坑:

InputNumber 计数器的change事件定义时如果不传入参数value,会产生this.num不同步的问题

<template>
 <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
</template>
<script>
 export default {
 data() {
  return {
  num: 1
  };
 },
 methods: {
  handleChange(value) {
  console.log(value);
  }
 }
 };
</script>

到此这篇关于Element InputNumber计数器的使用方法的文章就介绍到这了,更多相关Element InputNumber计数器内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
固定背景实现的背景滚动特效示例分享
May 19 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
node文件上传功能简易实现代码
Jun 16 Javascript
微信小程序实现倒计时补零功能
Jul 09 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
基于Vue中的父子传值问题解决
Jul 27 #Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 #Javascript
JS图片懒加载技术实现过程解析
Jul 27 #Javascript
Element Notification通知的实现示例
Jul 27 #Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 #Javascript
Element Backtop回到顶部的具体使用
Jul 27 #Javascript
解决vue中的无限循环问题
Jul 27 #Javascript
You might like
基于php 随机数的深入理解
2013/06/05 PHP
PHP中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
WordPress开发中用于获取近期文章的PHP函数使用解析
2016/01/05 PHP
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
Angular的$http与$location
2016/12/26 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
python实现将文本转换成语音的方法
2015/05/28 Python
Python画图学习入门教程
2016/07/01 Python
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
python实现微信接口(itchat)详细介绍
2017/10/23 Python
解决python使用open打开文件中文乱码的问题
2017/12/29 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
PHP实现发送和接收JSON请求
2018/06/07 Python
python人民币小写转大写辅助工具
2018/06/20 Python
python 实现敏感词过滤的方法
2019/01/21 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
四年级语文教学反思
2014/02/05 职场文书
应届毕业生求职信范文
2014/05/08 职场文书
购房意向书
2014/08/30 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python
python实现简易自习室座位预约系统
2021/06/30 Python