vue input输入框限制输入负号、数字、以及两位小数

在Vue中，你可以使用input事件和正则表达式来限制输入框的输入。以下是一个示例，展示了如何限制输入框仅接受负号、数字以及两位小数。

<template>
  <div>
    <input type="text" @input="limitInput" :value="inputValue" />
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    limitInput(event) {
      // 获取输入框的值
      let value = event.target.value;
 
      // 正则表达式，匹配负号开头，紧跟数字，可以有两位小数的字符串
      const regex = /^-?\d+(\.\d{1,2})?$/;
 
      // 如果输入的值不匹配正则表达式，则将inputValue设置为上一个值
      if (!regex.test(value)) {
        this.inputValue = event.target.value = value.replace(/[^\d.-]/g, '');
      } else {
        this.inputValue = value;
      }
    }
  }
};
</script>

在这个示例中，我们定义了一个limitInput方法，它会在每次输入时触发。该方法使用正则表达式/^-?\d+(\.\d{1,2})?$/来检查输入值。如果输入值不符合这个正则表达式，则会用相同的输入值覆盖输入框的内容，但去除掉所有非数字和负号的字符。这样就可以限制用户只能输入负号、整数或者两位小数的数字。