当前位置：首页 > VUE

vue回车实现登录

2026-03-08 14:02:39VUE

在Vue中实现回车登录功能

监听键盘事件，在用户按下回车键时触发登录逻辑。可以通过以下方式实现：

<template>
  <div>
    <input v-model="username" @keyup.enter="handleLogin" placeholder="用户名">
    <input v-model="password" type="password" @keyup.enter="handleLogin" placeholder="密码">
    <button @click="handleLogin">登录</button>
  </div>
</template>

组件方法实现

在methods中定义处理登录的方法：

vue回车实现登录

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      // 登录逻辑
      if(this.username && this.password) {
        // 调用API或处理登录
        console.log('登录中...', this.username)
      } else {
        alert('请输入用户名和密码')
      }
    }
  }
}
</script>

全局监听回车事件

如果需要在整个应用范围内监听回车事件：

vue回车实现登录

mounted() {
  window.addEventListener('keyup', (event) => {
    if(event.key === 'Enter') {
      this.handleLogin()
    }
  })
},
beforeDestroy() {
  window.removeEventListener('keyup')
}

使用修饰符简化实现

Vue提供了.enter修饰符，可以更简洁地实现回车事件监听：

<input v-model="password" @keyup.enter.native="handleLogin">

表单提交方式

对于表单元素，可以使用原生的form提交方式：

<form @submit.prevent="handleLogin">
  <input v-model="username">
  <input v-model="password" type="password">
  <button type="submit">登录</button>
</form>

这种方式会自动响应回车键，无需单独监听。

标签: vue