Vue.js 输入限制：仅允许 1-9 数字或空字符串

本文介绍两种 Vue.js 中限制输入框内容的方法，仅允许用户输入 1 到 9 之间的数字或空字符串，其他内容无效。

方式一：使用 watch

可以使用 watch 属性来监控输入框的值变化，并在值发生改变时进行判断和处理。

watch: {
  inputValue: function(newValue, oldValue) {
    if (!/^[1-9]*$/.test(newValue) && newValue !== '') {
      this.inputValue = oldValue;
    }
  }
}

这里使用正则表达式 '^[1-9]*$' 来限制输入内容，表示只能输入由 1-9 数字组成的字符串，或者空字符串。如果输入内容不符合要求，则将输入框的值重置为上一次的值。

方式二：在 input 事件中处理

也可以在输入框的 input 事件中处理输入内容。

<template>
  <div>
    <input type='text' v-model='inputValue' @input='handleInput' />
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
    };
  },
  methods: {
    handleInput(event) {
      const value = event.target.value;
      if (!/^[1-9]*$/.test(value) && value !== '') {
        event.target.value = this.inputValue;
      } else {
        this.inputValue = value;
      }
    },
  },
};
</script>

这里在输入框的 input 事件中，先获取输入框的值，然后使用正则表达式来判断输入内容是否符合要求。如果不符合，则将输入框的值重置为上一次的值；否则，将数据中的值更新为输入框的值。

两种方法各有优劣：

watch 方法更加简洁，代码量更少，但可能存在性能问题，尤其是在输入框内容频繁变化的情况下。
input 事件方法代码量稍多，但性能更高，更适合频繁输入的情况。

最终选择哪种方法，取决于具体的应用场景和需求。