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拖放插件集合
Apr 09 Javascript
关于JavaScript的面向对象和继承有利新手学习
Jan 11 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
多个$(document).ready()的执行顺序实例分析
Jul 26 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
Angular学习教程之RouterLink花式跳转
May 03 Javascript
详解Vue、element-ui、axios实现省市区三级联动
May 07 Javascript
Vue插件之滑动验证码
Sep 21 Javascript
vue改变循环遍历后的数据实例
Nov 07 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 Javascript
node.js爬虫框架node-crawler初体验
Oct 29 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
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
PHP在线生成二维码(google api)的实现代码详解
2013/06/04 PHP
浅谈php命令行用法
2015/02/04 PHP
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
通过JS来动态的修改url,实现对url的增删查改
2014/09/01 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
python实现类之间的方法互相调用
2018/04/29 Python
Python求解任意闭区间的所有素数
2018/06/10 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
什么是继承
2013/12/07 面试题
毕业生医学检验求职信
2013/10/16 职场文书
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
金融管理专业求职信
2014/07/10 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL