vue3判断输入是否正确

Vue3中，我们可以利用v-model指令结合自定义验证规则来判断输入是否正确。通常的做法是在表单组件中创建一个计算属性，接收用户的输入值，并提供一个校验函数来检查输入的合法性。

例如：

<template>
  <div>
    <input v-model="inputValue" />
    <span>{{ validationMessage }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      validationMessage: '',
    };
  },
  computed: {
    isValidInput() {
      // 自定义验证规则，这里假设我们只接受数字
      const isNumeric = Number.isNaN(Number(this.inputValue));
      if (isNumeric) {
        this.validationMessage = '请输入数字';
      } else {
        this.validationMessage = '';
      }
      return !this.validationMessage;
    },
  },
};
</script>

在这个例子中，`isValidInput`计算属性会根据用户输入的值动态更新`validationMessage`，当输入不是数字时，显示错误提示。如果`validationMessage`为空，表示输入是正确的。