vue.js中 ,回车键实现登录或者提交表单!

vue的功能非常强大,但是我们作为一个后端开发人员,前端的东西不一定都弄的很明白,今天就给大家介绍一个回车提交表单的真实案例,达到回车登录的效果!

@ keyup.enter 实现的效果 

<input v-model = "password" type="password" name="" class="pwd" placeholder="密码" @keyup.enter="handellogin">// 这里是一个输入框 

 methods:{
    handellogin(){
      this.$axios.post(`${this.$settings.Host}/users/login/`,{
        username:this.username,
        password:this.password
      }).then(response=>{
        console.log(response.data);
        this.$message({
          message: '恭喜你,登录成功了',
          type: 'success'
        });
        this.$router.push({ path:'/'  })
      }).catch(error=>{
        if (error.response.status === 400) {
          this.$message.error('密码错误哦,您在好好想想哦');
        }

      })
    },


  },

 

 

你可能感兴趣的:(vue.js中 ,回车键实现登录或者提交表单!)