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 ...
随机推荐
- C语言应用--数据类型定制一结构体数组
结构体定义成功后,其实和c语言内部的类型区别也不大了,自然可以用来定义结构体类型的数组了.我们根据结构体定义的方式不同,分别用多种方式定义结构体数组:
- 深度解读Facebook刚开源的beringei时序数据库——数据压缩delta of delta+充分利用内存以提高性能
转自:https://yq.aliyun.com/topic/58?spm=5176.100239.blogcont69354.9.MLtp4T 摘要: Facebook最近开源了beringei时序 ...
- 2018-2019-2 20165234 《网络对抗技术》 Exp6 信息搜集与漏洞扫描
Exp6 信息搜集与漏洞扫描 实验内容 1. 各种搜索技巧的应用 2. DNS IP注册信息的查询 3. 基本的扫描技术:主机发现.端口扫描.OS及服务版本探测.具体服务的查点(以自己主机为目标) 4 ...
- delphi 解决android 9上无法使用http协议
delphi 解决android 9上无法使用http协议 安卓9不让客户端通过非https方式访问服务端数据(不允许发送明文http请求)的问题. 解决方法: 1.选择安卓平台编译一次程序,在项目根 ...
- viewbag
How does ViewBag in ASP.NET MVC work behind the scenes? https://stackoverflow.com/a/16950197/3782855 ...
- 项目管理工具-OmniPlan 3 for Mac
链接:https://pan.baidu.com/s/1tp_37fHXHwJuklL1nNSwig 密码:l0sf 激活迷药(里面自带的keygen不能用,用这个好使): Name: Appked ...
- 《高性能mysql》笔记(第一章,mysql的架构与历史)
mysql的服务器逻辑架构图如下: 目前工作用的5.5版本,5.5版本开始mysql开始将innoDB作为默认的存储引擎,innoDB的表是基于聚簇索引建立的. mysql的存储引擎锁管理非常重要,在 ...
- 002-创建型-03-单例模式(Singleton)【7种】、spring单例及原理
一.概述 保证一个类仅有一个实例,并提供一个全局访问点 私有构造器.线程安全.延迟加载.序列化和反序列化安全.反射攻击 1.1.适用场景 1.在多个线程之间,比如servlet环境,共享同一个资源或者 ...
- Django——models中导入数据重复的解决办法
如果你导入数据过多,导入时出错了,或者你手动停止了,导入了一部分,还有一部分没有导入.或者你再次运行上面的命令,你会发现数据重复了,怎么办呢? django.db.models 中还有一个函数叫 ge ...
- 更新Conda源和pip源
更新conda源 各系统都可以通过修改用户目录下的 .condarc 文件: channels: - defaults show_channel_urls: true default_channels ...