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 ...
随机推荐
- 基于部标1078视频协议和苏标Adas协议构建主动安全平台
苏标本身仍然是基于部标808协议的基础上递增起草的,苏标协议是包容808协议的, 不能脱离808协议而独立存在的, 主要基于<JT/T 796 道路运输车辆卫星定位系统平台技术要求>.&l ...
- Spring Cloud Gateway(三):网关处理器
1.Spring Cloud Gateway 源码解析概述 API网关作为后端服务的统一入口,可提供请求路由.协议转换.安全认证.服务鉴权.流量控制.日志监控等服务.那么当请求到达网关时,网关都做了哪 ...
- Seata 中类SPI使用机制分析
Seata中采用了与sofa-rpc和dubbo中相同的服务扩展机制.都是基于JAVA自身的服务发现机制-SPI进行再次封装注解,sofa-rpc和dubbo(@Deprecated)中的注解名字叫做 ...
- Spring —— @Async注解的使用
参考文档 Spring Boot使用@Async实现异步调用:自定义线程池 Spring Boot使用@Async实现异步调用:ThreadPoolTaskScheduler线程池的优雅关闭
- 异步任务神器 和定时任务Celery
异步任务神器 Celery Celery 在程序的运行过程中,我们经常会碰到一些耗时耗资源的操作,为了避免它们阻塞主程序的运行,我们经常会采用多线程或异步任务.比如,在 Web 开发中,对新用户的注册 ...
- ASP.NET进行请求转发
前言 前两天将网站的部分功能在小程序上实现,网站的后台是http,没有配置域名和安全证书,小程序的线上版本是无法访问的,因此需要从配有域名和安全证书的站点进行转发.即小程序请求A,A转发请求到B,B获 ...
- 用Fiddler模拟低速网络环境(弱网)
原文链接:http://caibaojian.com/fiddler.html 有时候宽频网路用习惯了… 在开发的过程就比较少去考虑最佳化的问题… 但当有人反应说「你的网页好慢」 甚至当网路速度慢,会 ...
- OpenTK学习笔记(2)-工作窗口的三种方法创建方法(winfrom下类的形式创建)
参考资料: https://www.codeproject.com/Articles/1167212/OpenGL-with-OpenTK-in-Csharp-Part-Initialize-the- ...
- SparkConf和SparkContext
任何Spark程序都是SparkContext开始的,SparkContext的初始化需要一个SparkConf对象,SparkConf包含了Spark集群配置的各种参数. 初始化后,就可以使用Spa ...
- JV默认是如何处理异常
main函数收到这个问题时,有两种处理方式: a:自己将该问题处理,然后继续运行 b:自己没有针对的处理方式,只有交给调用main的jvm来处理 jvm有一个默认的异常处理机制,就将该异常进行处理. ...