vue v-if form校验不消失

你可以使用 Vue 的 v-if 指令和表单校验库来实现表单校验，并使错误消息在校验通过后消失。下面是一个简单的示例：

首先，你需要引入一个表单校验库，比如 VeeValidate。你可以在项目中安装它：

npm install vee-validate

然后，在你的 Vue 组件中，你可以使用 v-if 和 VeeValidate 来实现表单校验和错误消息的显示和隐藏。以下是一个示例代码：

<template>
  <div>
    <input v-model="email" type="text" name="email" placeholder="Email">
    <span v-if="errors.has('email')">{{ errors.first('email') }}</span>
    <button @click="submitForm">Submit</button>
  </div>
</template>

<script>
import { required, email } from 'vee-validate/dist/rules';
import { extend } from 'vee-validate';
import { ValidationProvider, ValidationObserver } from 'vee-validate';

extend('required', {
  ...required,
  message: 'This field is required'
});

extend('email', {
  ...email,
  message: 'Invalid email format'
});

export default {
  data() {
    return {
      email: '',
      errors: {}
    };
  },
  methods: {
    submitForm() {
      this.$validator.validateAll().then(result => {
        if (result) {
          // 校验通过，执行提交逻辑
        }
      });
    }
  },
  components: {
    ValidationProvider,
    ValidationObserver
  }
};
</script>

在上面的代码中，我们首先引入了 VeeValidate 的校验规则和组件，然后在 data 中定义了 email 和 errors 变量。在模板中，我们使用 v-model 来绑定 email 变量，使用 v-if 来判断是否有错误消息需要显示，使用 errors.has 和 errors.first 方法来获取错误消息。在 submitForm 方法中，我们调用 this.$validator.validateAll() 来触发表单校验，校验通过后执行提交逻辑。

这样，在表单校验通过后，错误消息就会消失。