Vue.js Enter 键自动触发登录功能

要在 Vue.js 中实现按下键盘的 Enter 键自动触发登录功能，通常可以通过监听键盘事件来实现。以下是一个简单的示例，说明如何在登录页面中实现这一功能：

示例代码

<template>
  <div>
    <h2>登录</h2>
    <input
      type="text"
      v-model="username"
      @keyup.enter="login" <!-- 监听 Enter 键 -->
      placeholder="用户名"
    />
    <input
      type="password"
      v-model="password"
      @keyup.enter="login" <!-- 监听 Enter 键 -->
      placeholder="密码"
    />
    <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      // 登录逻辑
      if (this.username && this.password) {
        // 假设你在这里进行 API 调用或其他登录逻辑
        console.log('用户名:', this.username);
        console.log('密码:', this.password);
        // 这里可以进行路由跳转，例如
        // this.$router.push('/dashboard');
      } else {
        alert('请填写用户名和密码');
      }
    }
  }
};
</script>

<style>
/* 样式可以根据需求自定义 */
</style>

说明

1. v-model：用于绑定输入框的值到组件的 data。
2. @keyup.enter：监听输入框中的键盘事件，只有在按下 Enter 键时，才会调用 login 方法。
3. login 方法：处理登录逻辑，比如验证用户输入并执行相应的操作（如 API 调用、路由跳转等）。

结果

这样设置后，用户在输入用户名或密码时按下 Enter 键，就会触发登录逻辑，相当于点击登录按钮。