el-input-number 加减监听

可以通过监听 el-input-number 的 change 事件来获取输入框中的值变化，然后进行相应的操作。例如：

<el-input-number v-model="num" @change="handleChange"></el-input-number>

methods: {
handleChange(val) {
console.log(val); // 获取输入框中的值
// 进行相应的操作
}
}

相关问题

用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 的数字了。

el-select和el-input-number联用

el-select和el-input-number是Element UI中的两个组件，可以联用来实现特定的功能。el-select是一个下拉选择框组件，el-input-number是一个数字输入框组件。

要实现el-select和el-input-number的联用，可以通过监听el-select的change事件，在事件回调函数中动态改变el-input-number的值。

以下是一个示例代码：

<template>
  <div>
    <el-select v-model="selectedValue" @change="handleChange">
      <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
    </el-select>
    <el-input-number v-model="inputValue" :min="minValue" :max="maxValue"></el-input-number>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '', // el-select选中的值
      inputValue: 0, // el-input-number的值
      minValue: 0, // el-input-number的最小值
      maxValue: 100 // el-input-number的最大值
    };
  },
  computed: {
    options() {
      // el-select的选项列表
      return [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' }
      ];
    }
  },
  methods: {
    handleChange() {
      // el-select的change事件回调函数
      // 根据选中的值改变el-input-number的值
      if (this.selectedValue === 'option1') {
        this.inputValue = 10;
      } else if (this.selectedValue === 'option2') {
        this.inputValue = 20;
      } else if (this.selectedValue === 'option3') {
        this.inputValue = 30;
      }
    }
  }
};
</script>

在上述代码中，el-select的选项列表通过computed属性options返回，可以根据实际需求进行修改。在handleChange方法中，根据选中的值改变el-input-number的值。

通过以上代码，el-select和el-input-number可以联用，当选择不同的选项时，el-input-number的值会相应改变。