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 相关文章推荐
jQuery 剧场版 你必须知道的javascript
May 27 Javascript
javascript 动态修改样式和层叠样式表代码
Apr 27 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
Apr 01 Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
Oct 25 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 Javascript
解决vue addRoutes不生效问题
Aug 04 Javascript
基于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针对cookie操作的队列操作类实例
2014/12/10 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
php强制用户转向www域名的方法
2015/06/19 PHP
Laravel中使用FormRequest进行表单验证方法及问题汇总
2016/06/19 PHP
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
js模拟微博发布消息
2017/02/23 Javascript
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
javascript实现时钟动画
2020/12/03 Javascript
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
一个入门级python爬虫教程详解
2021/01/27 Python
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
2013年入党人员的自我鉴定
2013/10/25 职场文书
自荐信范文
2013/12/10 职场文书
英文导游欢迎词
2014/01/11 职场文书
公司新年寄语
2014/04/04 职场文书
个人自查自纠材料
2014/10/14 职场文书
贷款担保书
2015/01/20 职场文书
2019年“我为祖国点赞”演讲稿(3篇)
2019/09/26 职场文书
七年级作文之游记
2019/12/11 职场文书
使用JS实现简易计算器
2021/06/14 Javascript
Python面向对象之成员相关知识总结
2021/06/24 Python
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL
青岛市的收音机研制与生产
2022/04/07 无线电