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 实现表单验证功能代码(简洁)
Jul 03 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 Javascript
js实现精确到秒的倒计时效果
May 29 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
详解django模板与vue.js冲突问题
Jul 07 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 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
怎么使 Mysql 数据同步
2006/10/09 PHP
php生成缩略图的类代码
2008/10/02 PHP
PHP使用header()输出图片缓存实例
2014/12/09 PHP
深入理解PHP中的empty和isset函数
2016/05/26 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
2015/08/19 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
2017/02/22 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
浅谈Express异步进化史
2017/09/09 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
Tensorflow 同时载入多个模型的实例讲解
2018/07/27 Python
Python计算公交发车时间的完整代码
2020/02/12 Python
Python实现分数序列求和
2020/02/25 Python
Python必须了解的35个关键词
2020/07/16 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
捐款倡议书怎么写
2014/05/13 职场文书
立志成才演讲稿
2014/09/04 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
2016国培研修心得体会
2016/01/08 职场文书
threejs太阳光与阴影效果实例代码
2022/04/05 Javascript
MySQL创建管理KEY分区
2022/04/13 MySQL
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android
ant design charts 获取后端接口数据展示
2022/05/25 Javascript