vue2 用户名密码不正确提示

在Vue2中，可以使用`v-if`指令来根据不同的情况显示不同的提示信息。在用户名或密码不正确时，可以设置一个布尔值`isInvalid`，并在模板中根据该值显示对应的提示信息。示例代码如下：

<template>
  <div class="login-container">
    <h1>登录</h1>
    <form @submit.prevent="submit">
      <div class="form-group">
        <label for="username">用户名:</label>
        <input type="text" id="username" v-model.trim="username" required>
      </div>
      <div class="form-group">
        <label for="password">密码:</label>
        <input type="password" id="password" v-model.trim="password" required>
      </div>
      <button type="submit" :disabled="!validForm">登录</button>
      <div v-if="isInvalid" class="error-message">用户名或密码不正确</div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      isInvalid: false
    };
  },
  computed: {
    validForm() {
      return this.username.trim() && this.password.trim();
    }
  },
  methods: {
    submit() {
      // 模拟登录验证
      if (this.username === "admin" && this.password === "123456") {
        alert("登录成功");
      } else {
        this.isInvalid = true;
      }
    }
  }
};
</script>

<style>
.error-message {
  color: red;
  font-size: 14px;
}
</style>

在`submit`方法中，模拟了一个登录验证的过程，如果用户名和密码不正确，则将`isInvalid`设置为`true`，从而显示错误提示信息。在模板中，使用`v-if`指令来判断`isInvalid`的值，如果为`true`则显示错误提示信息。同时，还定义了一个`validForm`计算属性，用来判断表单是否填写完整。登录按钮的`disabled`属性，也是根据`validForm`的值来动态设置的。