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 Lightbox 图片展示插件使用说明
Apr 25 Javascript
js 中的switch表达式使用示例
Jun 03 Javascript
javascript + jquery实现定时修改文章标题
Mar 19 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
angular中使用路由和$location切换视图
Jan 23 Javascript
JQuery遍历DOM节点的方法
Jun 11 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
Dec 26 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
node.js爬虫爬取拉勾网职位信息
Mar 14 Javascript
老生常谈Bootstrap媒体对象
Jul 06 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
vue.js this.$router.push获取不到params参数问题
Mar 03 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 array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
php生成静态页面的简单示例
2014/04/17 PHP
laravel请求参数校验方法
2019/10/10 PHP
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
2016/09/28 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
详解Python自建logging模块
2018/01/29 Python
Sanic框架流式传输操作示例
2018/07/18 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
thinkphp5 路由分发原理
2021/03/18 PHP
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
英格兰足协官方商店:England Store
2019/07/12 全球购物
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)-> (一千零一拾一元整)输出
2015/05/29 面试题
移动通信行业实习自我鉴定
2013/09/28 职场文书
施工协议书范本
2014/04/22 职场文书
归元寺导游词
2015/02/06 职场文书
警告通知
2015/04/25 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL