![ed7b3f42aee73e401941003660173fa5.png](https://i-blog.csdnimg.cn/blog_migrate/210fbfb9cc8238716cdf31bbadce0228.jpeg)
问题:0经验学简单的登录比对
如果没有下载vue独立的文件,可以看我上一篇文章-----学习前端鉴权之前先创建vue项目,前端女生带你看具体步骤(1)
第一步:在路由里新加个简单的登录页 router/index.js
![738a2d24ecd9e3583c077a5ff956909e.png](https://i-blog.csdnimg.cn/blog_migrate/c3140915916c6c7c23838985e3e75ec8.jpeg)
在这二个地方加路由地址
第二步:在commponent/loginPage(登录页面可以去elementUI复制一个)
![07c0407321950678fc6485d5d53073f4.png](https://i-blog.csdnimg.cn/blog_migrate/18e55f95d7017e9be88a30bbdd88b325.jpeg)
找了类似这种可以输入用户名密码的
场景一:登录验证时,有一个用户名密码数组,然后根据当前用户输入的用户名和密码判断是否相同,相同登录成功,反之失败,
逻辑:先遍历数组,把输入的用户名和密码和数组里用户名和密码比对??
Html:
![1a830b2305d3e5d816c3bb3593cc3251.png](https://i-blog.csdnimg.cn/blog_migrate/c9f6aa25f765484bfc1518464d82974d.jpeg)
Js:
写userArr
![94936695d8ea1abadd642afd00e042ba.png](https://i-blog.csdnimg.cn/blog_migrate/a129ae5eca9b3aef071cd33e861659fc.jpeg)
在methods:里写handleSubmits2方法
![ec7d386df1e6c729aa86eaa043ce9cea.png](https://i-blog.csdnimg.cn/blog_migrate/1de1985add57000e74b062dd45d5c908.jpeg)
错误写法,输入错的登录信息会提示二次
随便输入错误的用户名和密码:à会发先登录失败出了二次,明显错了,大家思考下怎么写错误的时候提示一次,还有forEach里的this指什么
![66c4f4151d0c32be26a677478f0aa3f4.png](https://i-blog.csdnimg.cn/blog_migrate/6044d69fd2a6d06304ed0f8660b8e1c6.jpeg)
喜欢我的朋友可以关注我,有问题的朋友可以给我留言啊