Vue中实现数字输入限制：多种方法解析

7个月前更新

034338

在Vue中，如果你想要实现一个输入框（比如<input>或<textarea>，但通常<textarea>不支持仅输入数字，所以我们这里主要讨论<input>），使得用户只能输入数字，有几种方法可以实现。这里主要讨论基于<input type="number">的方式以及使用<input type="text">配合Vue的监听器（watchers）或事件处理（event handling）的方式。

1. 使用`<input type="number">`

这是最简单直接的方法，通过设置type属性为number，你可以创建一个只能输入数字的输入框。但这种方法有一些限制，比如用户仍然可以使用浏览器自带的箭头来增加或减少值，以及在一些特殊情况下（如通过粘贴非数字文本）输入非数字内容。


<template>  
  <input type="number" v-model.number="numberValue" />  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      numberValue: 0,  
    };  
  },  
};  
</script>
<template>  
  <input type="number" v-model.number="numberValue" />  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      numberValue: 0,  
    };  
  },  
};  
</script>
<template>  
  <input type="number" v-model.number="numberValue" />  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      numberValue: 0,  
    };  
  },  
};  
</script>

注意，这里使用了v-model.number来确保Vue将输入框的值解析为数字类型。但即便如此，用户仍然可以粘贴非数字内容到输入框中，这时你需要进一步处理这些情况。

2. 使用`<input type="text">`结合Vue监听器或事件处理

如果你需要更严格的控制（比如阻止用户粘贴非数字内容），你可以使用<input type="text">，并结合Vue的监听器或事件处理函数来过滤输入。

方法一：使用事件处理


<template>  
  <input  
    type="text"  
    v-model="stringValue"  
    @input="validateInput"  
  />  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      stringValue: '',  
    };  
  },  
  methods: {  
    validateInput(event) {  
      // 过滤非数字字符  
      this.stringValue = event.target.value.replace(/[^0-9.]/g, '');  
  
      // 可选：处理小数点位置，防止多个小数点等  
      // 这里只是一个基本示例，你可以根据需要调整  
    },  
  },  
};  
</script>
<template>  
  <input  
    type="text"  
    v-model="stringValue"  
    @input="validateInput"  
  />  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      stringValue: '',  
    };  
  },  
  methods: {  
    validateInput(event) {  
      // 过滤非数字字符  
      this.stringValue = event.target.value.replace(/[^0-9.]/g, '');  
  
      // 可选：处理小数点位置，防止多个小数点等  
      // 这里只是一个基本示例，你可以根据需要调整  
    },  
  },  
};  
</script>
<template>  
  <input  
    type="text"  
    v-model="stringValue"  
    @input="validateInput"  
  />  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      stringValue: '',  
    };  
  },  
  methods: {  
    validateInput(event) {  
      // 过滤非数字字符  
      this.stringValue = event.target.value.replace(/[^0-9.]/g, '');  
  
      // 可选：处理小数点位置，防止多个小数点等  
      // 这里只是一个基本示例，你可以根据需要调整  
    },  
  },  
};  
</script>

方法二：使用计算属性和`v-model`的`.trim`修饰符（仅处理非数字输入）

虽然.trim修饰符主要是用来去除首尾空格的，但我们可以利用计算属性来模拟类似的效果，用于确保绑定到输入框的值总是数字（注意，这并不会阻止用户输入非数字字符，只是会在输入后立即移除它们）。


<template>  
  <input  
    type="text"  
    :value="stringValue"  
    @input="updateValue"  
  />  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      numberValue: '',  
    };  
  },  
  computed: {  
    stringValue: {  
      get() {  
        return this.numberValue;  
      },  
      set(value) {  
        // 这里设置时可能不需要做任何处理，直接赋值即可  
        // 但如果你需要在设置值之前做一些格式化，可以在这里做  
        this.numberValue = value.replace(/[^0-9.]/g, '');  
      },  
    },  
  },  
  methods: {  
    updateValue(event) {  
      // 过滤非数字字符并更新data中的值  
      this.stringValue = event.target.value.replace(/[^0-9.]/g, '');  
    },  
  },  
};  
</script>
<template>  
  <input  
    type="text"  
    :value="stringValue"  
    @input="updateValue"  
  />  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      numberValue: '',  
    };  
  },  
  computed: {  
    stringValue: {  
      get() {  
        return this.numberValue;  
      },  
      set(value) {  
        // 这里设置时可能不需要做任何处理，直接赋值即可  
        // 但如果你需要在设置值之前做一些格式化，可以在这里做  
        this.numberValue = value.replace(/[^0-9.]/g, '');  
      },  
    },  
  },  
  methods: {  
    updateValue(event) {  
      // 过滤非数字字符并更新data中的值  
      this.stringValue = event.target.value.replace(/[^0-9.]/g, '');  
    },  
  },  
};  
</script>
<template>  
  <input  
    type="text"  
    :value="stringValue"  
    @input="updateValue"  
  />  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      numberValue: '',  
    };  
  },  
  computed: {  
    stringValue: {  
      get() {  
        return this.numberValue;  
      },  
      set(value) {  
        // 这里设置时可能不需要做任何处理，直接赋值即可  
        // 但如果你需要在设置值之前做一些格式化，可以在这里做  
        this.numberValue = value.replace(/[^0-9.]/g, '');  
      },  
    },  
  },  
  methods: {  
    updateValue(event) {  
      // 过滤非数字字符并更新data中的值  
      this.stringValue = event.target.value.replace(/[^0-9.]/g, '');  
    },  
  },  
};  
</script>