vue 输入框只能输入数字

<template>
  <div>
    <!-- 使用 v-model 绑定输入框的值，并通过 @input 事件触发过滤函数 -->
    <input type="text" v-model="numberInput" @input="filterInput" placeholder="请输入数字">
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 存储输入框的值
      numberInput: ''
    };
  },
  methods: {
    // 过滤非数字字符
    filterInput(event) {
      // 使用正则表达式匹配非数字字符并替换为空字符串
      this.numberInput = event.target.value.replace(/[^\d]/g, '');
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要自行添加 */
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用 v-model 指令将输入框的值绑定到 numberInput 数据属性。
   • 使用 @input 事件监听输入框的变化，每次输入时触发 filterInput 方法。

2. 脚本部分 (<script>):

   • 在 data 中定义了一个 numberInput 属性，用于存储输入框的值。
   • filterInput 方法使用正则表达式 [^\d] 匹配所有非数字字符，并将其替换为空字符串，从而确保输入框中只保留数字。

3. 样式部分 (<style scoped>):

   • 样式部分可以根据实际需求进行自定义，这里留空供后续扩展。