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中 ,回车键实现登录或者提交表单!的更多相关文章
- Atitit vue.js 把ajax数据 绑定到form表单
Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...
- 在javascript中关于submit和button提交表单区别
submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上. ...
- (转)在javascript中关于submit和button提交表单区别
原文来自:http://www.jb51.net/article/42236.htm submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和b ...
- JS采用ActiveXObject实现用户在提交表单时屏蔽敏感词的功能
本例中敏感词ciku.txt放在C盘根目录下,采用的ActiveXObject插件获取本地文件内容.使用此插件不需网上下插件,直接用如下js代码即可. 浏览器需修改interner安全选项的级别,启用 ...
- Angular JS 中的内置方法之表单验证
angular js 结合html5 可以实现强大的表单验证功能 关闭html5自带的表单验证功能可以用
- Node.js学习笔记(2)--提交表单
说明(2017-5-2 11:42:33): 1. index.html <!DOCTYPE html> <html lang="en"> <head ...
- Struts2 token禁止重复提交表单
如果服务器响应慢的情况下,用户会重复提交多个表单,这时候有两种设计思想: 1.在客户端使用JS技术,禁止客户重复提交表单.但是这样会使一些不使用浏览器方式登陆的人比如使用底层通信来攻击你的服务器 2. ...
- form表单action提交表单,页面不跳转且表单数据含文件的处理方法
在最近的项目中需要将含 input[type='file']的表单提交给后台 ,并且后台需要将文件存储在数据库中.之前所用的方法都是先将文件上传到七牛服务器上,然后七牛会返回文件的下载地址,在提交表单 ...
- Asp.net Mvc Ajax.BeginForm提交表单
之前Mvc中一直用Html.BeginForm提交表单,即如下: @using (Html.BeginForm("Add", "News", FormMetho ...
随机推荐
- codeforces#1249F. Maximum Weight Subset(树上dp)
题目链接: http://codeforces.com/contest/1249/problem/F 题意: 一棵树的每个节点有个权值,选择一个节点集,使得任意点对的距离大于$k$ 求最大节点集权值, ...
- 使用python2 对服务器监控(监控内存,CPU,网卡流量等)
#!/usr/bin/env python # -*- coding:utf- -*- #create at -- 'this is a system monitor scripts' __autho ...
- Linux常用命令大全(最完整)
要学习Linux语法最好到专门的网站 常用语法大全:https://www.runoob.com/linux/linux-command-manual.html (菜鸟教程) 另外提供一个总结的不错的 ...
- vue中class用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Windows下OpenFOAM开发及使用环境配置指南 (2)【转载】
转载自:http://openfoam.blog.sohu.com/158751915.html *************************************************** ...
- 2018-2019-2 网络对抗技术 20165311 Exp 9 Web安全基础
2018-2019-2 网络对抗技术 20165311 Exp 9 Web安全基础 基础问题回答 实践过程记录 WebGoat安装 SQL注入攻击 1.命令注入(Command Injection) ...
- Android架构(一)MVP架构在Android中的实践
Android架构(一)MVP架构在Android中的实践 https://www.300168.com/yidong/show-2790.html 核心提示:为什么要重视程序的架构设计 对程序进 ...
- react图片自适应组件
import * as React from 'react'; import 'animate.css/animate.css' import {AutoImg} from "./style ...
- 创建Bitmap之Bitmap静态方法使用示例
package com.loaderman.customviewdemo; import android.app.Activity; import android.content.Intent; im ...
- window.open()详解及浏览器兼容性问题示例探讨
这篇文章主要介绍了window.open()的使用及浏览器兼容性问题方面的知识,感兴趣的朋友可以参考下 一.基本语法: window.open(pageURL,name,parameters) 其 ...