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++标准库分析总结(六)——<Map、Multimap、Set、Multiset设计原则>
关联容器我们可以看做是一个小型的数据库,它就是用key找value,编译器底层对于关联容器的实现有两种:红黑树(Red-Block tree)和哈希表(hash table,散列表). 一.红黑树简单 ...
- xiugai grub
https://wiki.gentoo.org/wiki/Flicker_Free_Boot#Getting_the_custom_version_of_grub
- vue要注意的小知识
心灵的鸡汤 https://www.zhangxinxu.com/wordpress/2017/06/ten-question-about-frontend-zhihu/ 1.第三方的js文件只能放在 ...
- 【原】Python基础-字典
字典是Python唯一内建的映射类型.键可以是数字,字符串和元组. 1 字典的创建 方法一:直接创建 例如: >>> dict = {'key1':'value1', 20: 80} ...
- HbuilderX
HBuilderX入门教程 HX是轻量编辑器和强大IDE的完美结合体.敏捷的性能,清爽的界面,强大的功能和于一身. 本文档面向入门用户,建议初学者仔细研读. 介绍 执着于更快一步的理念,hx的左侧项目 ...
- Java 面向对象(四)
代码块 什么是代码块 在类中或方法当中 使用 { } 括起来的一段代码,就称它是一个代码块. 在代码块当中定义的变量我们称是局部变量,在外面是没有办法使用的.这里定义的 a 就是一个局部变量. 代码块 ...
- mysql的配置文件解释
1 在执行mysqld命令时,下列配置会生效,即mysql服务启动时生效 [mysqld] character_set_server=utf8collation-server=utf8_general ...
- redis配置注意事项(适合于较大配置)
根据官方的建议,redis-server的相关配置建议如下,但是有些并不合适,LZ会进行说明(如果redis使用的内存还不到1GB,或者大量qps还不到1000的应用,这已经淘汰了99%的应用,很多配 ...
- Qt KDChart编译
最近开发中需要用到甘特图,感觉KDChart这个插件不错,在这里记录一下编译过程(其实很好编译,而且一次性就过了) 下载,kdchart-2.6.1-source,解压 打开src目录,用Qt Cre ...
- 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_07-Feign远程调用-Feign测试
2.2.1 Feign介绍 Feign是Netflix公司开源的轻量级rest客户端,使用Feign可以非常方便的实现Http 客户端.Spring Cloud引入 Feign并且集成了Ribbon实 ...