Vue input输入限制

限制数字

废话不多说，上代码

<template>
    <input v-model="value" @input="input">
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
    }
  },
  methods: {
    input: function (e) {
      this.value = e.target.value.replace(/[^\d]/g,'');
    }
  }
}
</script>

其他限制英文或者什么特殊需求的，只需要更换 replace() 方法中的正则表达式即可

这里简单赘述一下，网上其实有很多方法，有用计算属性computed实现的，也有说用<input v-model.number="age" type="number">，但其实这两种方式都一点点小缺陷

计算属性的实现 （错误示范，不建议使用）

这个方法基本实现了需求，但是有一点小缺陷，就是连续输入相同的限制字符时get()方法不会被连续触发，导致本来应该被限制的字符还是会被输入进去，原因我没搞明白，没有太深究，如果有人知道的话可以评论指教一下。谢谢

<input v-model="_value">
<script>
export default {
  data(){
    return {
      value:''
    }
  },
  computed: {
    _value: {
      set: function(value) {
          this.value = value;
      },
      get: function() {
          return this.value.replace(/[^0-9]+/g,'')
      }
    }
  }
};
</script>

第二种方法 type="number"（错误示范，不建议使用）

这个是官方提供的，它限制的是数值类型，数值类型与只能输入数字是两回事，这种方法可以输入字符‘.’和‘e’,与需求也是不符合的