el-input-number

`el-input-number` 是一个基于 Element UI 的数字输入框组件。它提供了一个可自定义范围的数字输入框，用户可以通过鼠标滚轮或点击按钮来增加或减少数值。你可以使用 `el-input-number` 来实现数字输入和调整的功能。

以下是一个示例代码，展示如何使用 `el-input-number` 组件：

<template>
  <el-input-number v-model="value" :min="1" :max="10" :step="1"></el-input-number>
</template>

<script>
export default {
  data() {
    return {
      value: 1
    };
  }
};
</script>

在上面的示例中，我们使用 `v-model` 指令将 `value` 变量与 `el-input-number` 组件进行双向绑定。通过设置 `min` 和 `max` 属性，我们限制了数值的范围为 1 到 10 之间。`step` 属性表示每次增加或减少的步长为 1。

你可以根据自己的需求，进一步自定义 `el-input-number` 组件的样式和功能。

相关问题

el-input-number与el-input

el-input-number和el-input都是element-ui中的表单输入组件，但它们的使用场景和功能略有不同。el-input-number是一个数字输入框，可以设置最大值、最小值、步长等属性，适用于需要输入数字的场景。而el-input是一个文本输入框，可以设置输入框类型、最大长度、是否可清空等属性，适用于需要输入文本的场景。此外，el-input还可以设置前缀、后缀、图标等，增强了输入框的可定制性。

用el-input标签，不用el-input-number标签

如果需要使用 `el-input` 标签实现让用户只能输入 0-100 的数字，可以通过监听输入框的 `input` 事件，并在事件处理函数中对输入的值进行判断和处理。

具体实现方法如下：

<template>
  <el-input v-model="value" @input="handleInput"></el-input>
</template>

在模板中，使用 `el-input` 标签，并绑定一个 `value` 变量和一个 `input` 事件。`value` 变量用于双向绑定输入框的值，`input` 事件用于监听输入框的输入事件。

<script>
export default {
  data() {
    return {
      value: ''
    };
  },
  methods: {
    handleInput(value) {
      // 判断输入的值是否为数字
      if (!/^\d*$/.test(value)) {
        value = this.value;
      }
      // 将输入的值限制在 0-100 的范围内
      if (value < 0) {
        value = 0;
      } else if (value > 100) {
        value = 100;
      }
      this.value = value;
    }
  }
};
</script>

在 JavaScript 中，定义一个 `handleInput` 函数，处理输入框的输入事件。在函数中，首先判断输入的值是否为数字，如果不是数字则将输入框的值重置为之前的值。然后，将输入的值限制在 0-100 的范围内，如果超出了这个范围，则将输入的值重置为 0 或 100。最后，将处理后的值赋值给 `value` 变量，实现输入框的双向绑定。

这样，就可以使用 `el-input` 标签实现让用户只能输入 0-100 的数字了。