接着前面的内容，前面只有一个样子，什么功能都没有，本文就是给他添加一下最基本的功能。
一下是实现的代码（<style>还是原来的，就不贴出来了）：
<template><div><p><span>账号：</span><el-input v-model="form.username" placeholder="请输入手机号或邮箱" class="myInput"></el-input></p><p><span>密码：</span><el-input v-model="form.password" placeholder="请输入密码" show-password class="myInput"></el-input></p><p><el-button @click="submitForm(form)">登录</el-button></p></div></template><script>export default {name: "login",data() {return {form: {username: "",password: ""}}},methods: {submitForm(form) {let flag = false;if (form.username === "admin") {flag = form.password === "admin";} else {flag = false;}if (flag){this.$message({message:'登陆成功',type:"success"});}else {this.$message({message:'账号或密码错误',type:"error"});}}}}</script>
根据网上查到的资料，我写了上面的代码，主要的变化有下面几个：
在script里添加了“data”，添加了集合“form”，其中有两个属性“username”和“password”，意思很明了，就是要把页面上输入的账号和密码给绑定下来。这个应该不难理解。而绑定呢，是靠<el-input>的属性“v-model”其次再在script中添加了methods， 其中定义了一个方法“submitForm”，该方法传入一个参数“form”，其实就是要账号密码。然后里面做了最简单的逻辑判断。然后根据结果弹窗提示。最后将该方法绑定到登录button中，使用button自带的click事件“@click=“submitForm(form)””，这样每次点击登录都会调用该方法。
最基本的登录界面的效果就出来了。
路由跳转
上面登录成功后就弹个窗提示，然后什么也没了，不符合现在常见的现象，一般登陆成功后会跳转到首页或者是刚才访问的页面，所以我们这里也在登录成功后做跳转到首页。其实很简单：
if (flag){this.$router.push("/"); // 跳转到首页this.$message({message:'登陆成功',type:"success"});}
就在上面的代码上加了一行，其他都不用动。这样就可以了。
enter提交表单功能
最近在测试这个登录功能时，按照老习惯，填完信息就回车提交，结果没有这个功能，老是要鼠标点一下登录按钮才能提交，很烦，所以做个识别回车键的功能。
我本来以为是个很简单的功能，element应该有封装这些常用的事件。事实上确实也有封装，只是不是理解的那样。
功能实现（简单版）
先直接将最终功能的实现吧：
<p><span>密码：</span><el-input @keyup.enter.native="submitForm(form)"v-model="form.password"placeholder="请输入密码"show-passwordclass="myInput"></el-input></p>
在“密码”那个input里，添加属性@keyup.enter.native=“submitForm(form)”，其他没变，这样在填完密码的时候回车就会调用submitForm(form)方法。
遇到的坑
我最开始的理解是，回车是绑定给“登录”按钮的监听事件，所以把@keyup.enter.native="submitForm(form)"加在button上，但是死活不生效。
网上很多资料都在讲，不生效是因为没加“.native”的问题，我就一直在各种搜，但是都找不到答案，就看到几乎所有文章都说加了native是可以的，他们代码是用的<el-input>
所以我就把这个事件绑到input上，果然就行了，看来是button不支持这么做。
功能实现（复杂版）
查资料的时候，最开始看到的实现方法都是比较复杂的，要写监听事件，我尝试完确实也可以，只是稍微麻烦一点，这里也记录一下。
<script>export default {name: "login",data() {return {form: {username: "",password: ""}}},methods: {submitForm(form) {// 此处节省篇幅，省去内容},// 按键后调用该方法keyDown(e){//如果是回车则执行登录方法if(e.keyCode === 13){this.submitForm(this.form)}},},mounted() {//绑定事件window.addEventListener('keydown',this.keyDown);},destroyed() {// 离开该页面后销毁监听事件，否则到别的页面还在监听window.removeEventListener('keydown',this.keyDown,false);}}</script>
只需要修改<script>，添加了keyDown(e)，mounted()和destroyed()，其实就是个按键监听事件，只要在这个页面上都在监听，效果就没有简单版的好。不过以后在别的场合用得着。只是注意一定要记得destroyed。
