当前位置：首页 > VUE

vue实现只能输数字

2026-01-19 23:55:10VUE

实现输入限制为数字的方法

在Vue中限制输入框只能输入数字，可以通过以下几种方式实现：

使用v-model和计算属性

通过计算属性对输入值进行过滤，只保留数字部分：

vue实现只能输数字

<template>
  <input v-model="numericValue" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  computed: {
    numericValue: {
      get() {
        return this.inputValue
      },
      set(val) {
        this.inputValue = val.replace(/[^\d]/g, '')
      }
    }
  }
}
</script>

使用键盘事件监听

监听keydown事件，阻止非数字键的默认行为：

<template>
  <input v-model="number" @keydown="handleKeyDown" />
</template>

<script>
export default {
  data() {
    return {
      number: ''
    }
  },
  methods: {
    handleKeyDown(e) {
      const allowedKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab']
      if (!allowedKeys.includes(e.key) && isNaN(parseInt(e.key))) {
        e.preventDefault()
      }
    }
  }
}
</script>

使用HTML5 input类型

对于简单场景，可以直接使用HTML5的number类型：

vue实现只能输数字

<input type="number" v-model="number" />

自定义指令实现

创建全局指令实现数字输入限制：

// 全局注册指令
Vue.directive('number-only', {
  bind(el) {
    el.addEventListener('input', () => {
      el.value = el.value.replace(/[^\d]/g, '')
    })
  }
})

// 使用指令
<input v-model="number" v-number-only />

结合正则表达式验证

在提交表单时进行验证，确保输入的是数字：

methods: {
  validateInput() {
    const regex = /^[0-9]+$/
    if (!regex.test(this.number)) {
      alert('请输入数字')
      return false
    }
    // 继续处理
  }
}

以上方法可以根据具体需求选择使用，计算属性方式适合需要实时过滤的场景，键盘事件方式可以提供更好的用户体验，HTML5类型最简单但样式和功能有限制。