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 相关文章推荐
javascript 拖放效果实现代码
Jan 22 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
node.js中的http.request.end方法使用说明
Dec 10 Javascript
javascript实现节点(div)名称编辑
Dec 17 Javascript
javascript事件委托的方式绑定详解
Jun 10 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 Javascript
javascript代码调试之console.log 用法图文详解
Sep 30 Javascript
详解Vue自定义过滤器的实现
Jan 10 Javascript
JS实现商品筛选功能
Aug 19 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
js+canvas实现纸牌游戏
Mar 16 Javascript
深入了解JS之作用域和闭包
Jun 16 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
ASP和PHP都是可以删除自身的
2007/04/09 PHP
php时区转换转换函数
2014/01/07 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
js不是基础的基础
2006/12/24 Javascript
html读出文本文件内容
2007/01/22 Javascript
海量经典的jQuery插件集合
2010/01/12 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
2012/05/14 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
js从Cookies里面取值的简单实现
2014/06/30 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
js实现密码强度检验
2017/01/15 Javascript
Javascript中的 “&amp;” 和 “|” 详解
2017/02/02 Javascript
layer.alert自定义关闭回调事件的方法
2019/09/27 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python的垃圾回收机制深入分析
2014/07/16 Python
Python抓取京东图书评论数据
2014/08/31 Python
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
Python如何实现远程方法调用
2020/08/07 Python
Python如何绘制日历图和热力图
2020/08/07 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
Python 中Operator模块的使用
2021/01/30 Python
H&M旗下高端女装品牌:& Other Stories
2018/05/07 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
如何实现一个自定义类的序列化
2012/05/22 面试题
土木工程毕业生自荐信
2013/11/12 职场文书
关于安全演讲稿
2014/05/09 职场文书
授权委托书协议书
2014/10/16 职场文书
2015年度党员个人总结
2015/02/14 职场文书
护士自我推荐信范文
2015/03/24 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
vue递归实现树形组件
2022/07/15 Vue.js
python中validators库的使用方法详解
2022/09/23 Python