试用vue写登陆逻辑代码

以下是一个简单的Vue登录逻辑示例：

<template>
  <div>
    <form>
      <label for="username">Username:</label>
      <input type="text" id="username" v-model="username">
      <br>
      <label for="password">Password:</label>
      <input type="password" id="password" v-model="password">
      <br>
      <button type="submit" @click.prevent="login">Login</button>
    </form>
    <p v-if="error">{{ error }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      error: ''
    }
  },
  methods: {
    login() {
      if (this.username === 'admin' && this.password === '123456') {
        // 登录成功，跳转到主页
        this.$router.push('/home')
      } else {
        // 登录失败，显示错误信息
        this.error = 'Invalid username or password'
      }
    }
  }
}
</script>

在这个示例中，我们通过v-model指令绑定了用户名和密码输入框的值。当用户点击“登录”按钮时，我们会调用login方法进行登录验证。如果用户名和密码匹配，我们会使用Vue Router将用户重定向到主页；否则，我们会在页面上显示一个错误消息。

请注意，这只是一个简单的示例，实际应用中，我们需要更复杂的逻辑和安全措施来保护用户数据和系统安全。