vue3判断输入账号密码是否正确

在 Vue 3 中，你可以通过数据绑定、计算属性或者事件处理函数来判断用户输入的账号和密码是否正确。这里是一个简单的例子，假设你有一个组件，它有 `username` 和 `password` 的输入字段，并有一个 `checkCredentials` 方法用于验证：

<template>
  <div>
    <input v-model="username" placeholder="用户名">
    <input type="password" v-model="password" placeholder="密码">
    <button @click="validateCredentials">验证</button>
    <p v-if="credentialsValid">{{ message }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const username = ref('');
const password = ref('');
let credentialsValid = false;
let message = '';

function validateCredentials() {
  // 假设你有一个静态的正确账号密码对
  const correctUsername = 'example';
  const correctPassword = 'examplePassword';

  credentialsValid = (username.value === correctUsername && password.value === correctPassword);
  if (credentialsValid) {
    message = '登录成功';
  } else {
    message = '用户名或密码错误';
  }
}
</script>

在这个例子中，当点击“验证”按钮时，会调用 `validateCredentials` 函数，根据输入的内容与预设的正确值比较，更新 `credentialsValid` 和显示相应的消息。