vue 输入数字范围的input

可以使用Vue的input组件结合v-model和min/max属性来实现输入数字范围的input。

示例代码如下：

<template>
  <div>
    <label for="numRange">请输入数字范围：</label>
    <input type="number" id="numRange" v-model="num" :min="min" :max="max">
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0, // 绑定输入框的值
      min: 0, // 数字的最小值
      max: 100 // 数字的最大值
    };
  }
};
</script>

在上面的代码中，我们定义了一个输入数字范围的input组件，通过v-model绑定输入框的值到num变量上，同时给input组件设置min和max属性，限制数字的范围。

使用该组件时，只需要将num、min和max属性传递给组件即可实现输入数字范围的功能。

<template>
  <div>
    <num-range v-model="rangeNum" :min="0" :max="100"></num-range>
    <p>您输入的数字范围是：{{rangeNum}}</p>
  </div>
</template>

<script>
import NumRange from './NumRange.vue';

export default {
  components: {
    NumRange
  },
  data() {
    return {
      rangeNum: 0
    };
  }
};
</script>

在上面的代码中，我们使用了NumRange组件，并将它的v-model绑定到rangeNum变量上，同时设置了min和max属性为0和100，限制了数字的范围。最终，在页面上展示输入框和输入的数字范围。