vue3限制input框只能输入0-100的数字

可以使用Vue3的v-model指令和自定义指令来实现这个功能。首先，在input标签上添加v-model指令绑定一个data中的变量，然后在自定义指令中监听input事件，判断输入的值是否在0-100之间，如果不在则将输入框的值设为0或100。以下是示例代码：

<template>
  <div>
    <input v-model.number="number" v-limit />
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 0
    }
  },
  directives: {
    limit: {
      bind(el) {
        el.addEventListener('input', function() {
          const value = parseInt(this.value)
          if (isNaN(value) || value < 0) {
            this.value = 0
          } else if (value > 100) {
            this.value = 100
          }
        })
      }
    }
  }
}
</script>

在上面的代码中，我们使用了v-model.number来绑定一个数值类型的变量number，这样输入框中的值就会被自动转换为数值类型。然后我们定义了一个名为limit的自定义指令，在bind钩子函数中监听input事件，判断输入的值是否在0-100之间，如果不在则将输入框的值设为0或100。最后在input标签上添加v-limit指令即可。