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中 ,回车键实现登录或者提交表单!的更多相关文章

  1. Atitit vue.js 把ajax数据 绑定到form表单

    Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...

  2. 在javascript中关于submit和button提交表单区别

    submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上. ...

  3. (转)在javascript中关于submit和button提交表单区别

      原文来自:http://www.jb51.net/article/42236.htm   submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和b ...

  4. JS采用ActiveXObject实现用户在提交表单时屏蔽敏感词的功能

    本例中敏感词ciku.txt放在C盘根目录下,采用的ActiveXObject插件获取本地文件内容.使用此插件不需网上下插件,直接用如下js代码即可. 浏览器需修改interner安全选项的级别,启用 ...

  5. Angular JS 中的内置方法之表单验证

    angular js 结合html5 可以实现强大的表单验证功能 关闭html5自带的表单验证功能可以用

  6. Node.js学习笔记(2)--提交表单

    说明(2017-5-2 11:42:33): 1. index.html <!DOCTYPE html> <html lang="en"> <head ...

  7. Struts2 token禁止重复提交表单

    如果服务器响应慢的情况下,用户会重复提交多个表单,这时候有两种设计思想: 1.在客户端使用JS技术,禁止客户重复提交表单.但是这样会使一些不使用浏览器方式登陆的人比如使用底层通信来攻击你的服务器 2. ...

  8. form表单action提交表单,页面不跳转且表单数据含文件的处理方法

    在最近的项目中需要将含 input[type='file']的表单提交给后台 ,并且后台需要将文件存储在数据库中.之前所用的方法都是先将文件上传到七牛服务器上,然后七牛会返回文件的下载地址,在提交表单 ...

  9. Asp.net Mvc Ajax.BeginForm提交表单

    之前Mvc中一直用Html.BeginForm提交表单,即如下: @using (Html.BeginForm("Add", "News", FormMetho ...

随机推荐

  1. 在CentOS7中安装zookeeper

    参考:https://www.linuxidc.com/Linux/2016-09/135052.htm 1.zookeeper运行需要jdk环境,先确保有配置jdk,可以参考此处 2.下载解压zoo ...

  2. 5.linux 软件安装的三种方法

      一.linux 操作系统中 软件的分类 以及软件的安装     vmtools  调用了perl语言写的安装脚本去进行内核的升级安装  ./ xxxxx        源码包安装软件:GNU  使 ...

  3. Hibernate HQL和QBC

    OID查询 一.什么是OID查询 根据对象的OID主键进行检索 二.OID查询方式 1. get方法 当get()方法被调用的时候就会立即发出SQL语句 并且返回的对象也是实际的对象 使用get()和 ...

  4. 搭建JavaWeb应用开发环境——Tomcat服务器

    学习web开发,需要先安装一台web服务器,然后再在web服务器中开发相应的web资源,供用户使用浏览器访问. 搭建JavaWeb应用开发环境——Tomcat服务器 1.疑问:学习web开发,为什么必 ...

  5. AI案例

    https://www.bilibili.com/read/cv830627     到底什么是人工智能?人工智能能做什么?这是大家最关心的问题,但说到真正能够理解的话,还是只小部分专业人士.这篇文章 ...

  6. 解决com.android.support版本冲突问题

    原文:https://www.jianshu.com/p/0fe985a7e17e 项目中不同Module的support包版本冲突怎么办? 只需要将以下代码复制到每个模块的build.gradle( ...

  7. 原生app是什么意思?

    原生的就是用 Android 和ios 写的 完全符合手机系统 其他的都是通过各种工具对代码转换为手机系统可以识别

  8. Linux怎样设置tomcat自启动

    --未验证 越来越多的人把tomcat部署在Linux下,但是linux下必须用命令才能启动tomcat,如果同一个服务器下tomcat部署几个的话,每次启动就很繁琐,能不能设置在linux系统启动时 ...

  9. HTML5 地理位置定位API(1)

    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...

  10. Qt使用boost库

    1.在官网下载boost库 boost_1_70_0.zip 2.将你的Qt的工具目录(有gcc.exe)设置环境变量.(比如F:\Qt592\Tools\mingw530_32\bin) 3.在命令 ...