如何实现number输入框限制0-36数值范围且最多输入2位字符？

maxlength 是HTML原生属性，但根据标准定义，它只对文本、密码、电话、邮箱、搜索、链接这几类输入框生效，type="number"类型的输入框默认不支持该属性，浏览器不会对它做长度拦截，这是预期行为，不是Vue或者你写法的问题。
另外你贴的原始代码里还有个小语法问题：Vue组件的data选项必须是返回对象的函数，直接写对象会导致组件复用时数据互相污染。

下面的写法可以同时满足三个需求：仅允许输入数字、输入值锁定在0-36区间、最多输入2位字符，同时保留移动端唤起数字键盘的原生体验：

<template>
  <input 
    type="number" 
    min="0" 
    max="36"
    @input="handleInput"
    v-model.number="hello"
  >
</template>

<script>
export default {
  data() {
    return {
      hello: ""
    }
  },
  methods: {
    handleInput(e) {
      // 先做长度截断，超过2位直接砍到2位
      let inputVal = e.target.value.toString()
      if (inputVal.length > 2) {
        inputVal = inputVal.slice(0, 2)
      }
      // 兜底过滤非数字字符，防止特殊输入法绕过number类型限制
      inputVal = inputVal.replace(/[^\d]/g, '')
      // 空值直接同步，不强制转0，适配用户清空输入框的场景
      if (inputVal === '') {
        this.hello = ''
        e.target.value = ''
        return
      }
      // 区间校验，超过36直接修正为36
      const numVal = Number(inputVal)
      this.hello = numVal > 36 ? 36 : numVal
      e.target.value = this.hello
    }
  }
}
</script>

• 不要为了用maxlength把输入框类型改成text，会丢失移动端自动唤起数字键盘的体验，上面的事件拦截方案完全不影响原生交互
• 不要只靠原生min/max属性做限制：这两个属性仅在表单提交、点击输入框自带的上下箭头时触发校验，用户手动输入时不会实时拦截，比如直接输入99也能正常输入，根本卡不住
• 如果业务要求输入框不能为空，把空值判断的逻辑去掉即可，空的时候直接给hello赋值0就行

内容的提问来源于stack exchange，提问作者Rapunzel