Element InputNumber计数器的使用方法

站长资源 2024/12/26 佚名

67 1538 67

DDR爱好者之家 Design By 杰米

组件—计数器

基础用法

<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>

禁用状态

<template>
 <el-input-number v-model="num" :disabled="true"></el-input-number>
</template>
<script>
 export default {
 data() {
  return {
  num: 1
  }
 }
 };
</script>

步数

<template>
 <el-input-number v-model="num" :step="2"></el-input-number>
</template>
<script>
 export default {
 data() {
  return {
  num: 5
  }
 }
 };
</script>

严格步数

<template>
 <el-input-number v-model="num" :step="2" step-strictly></el-input-number>
</template>
<script>
 export default {
 data() {
  return {
  num: 2
  }
 }
 };
</script>

精度

<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>

尺寸

<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>

按钮位置

<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

Events

Methods

在使用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,Element,计数器

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“Element InputNumber计数器的使用方法”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年12月26日

Element InputNumber计数器的使用方法

Element Rate 评分的使用方法

基于Vue中的父子传值问题解决

评论“Element InputNumber计数器的使用方法”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接