首页 > 其他 > 详细

Vue实现简单的模拟登陆操作

时间:2021-05-27 22:41:19      阅读:34      评论:0      收藏:0      [点我收藏+]

本案例主要是练习对vue的数据绑定,登陆功能有点粗糙,还有就是动态的引用了css样式,明白原理就可以了,以后可以再更新迭代

 

首先写出登录的html

技术分享图片

 

 接着是js代码

技术分享图片

 登录按钮绑定了login()方法,如果用户名和密码输入正确,字体颜色就是绿色,否则就是红色

如果账号密码正确,就把样式success设置为true,把errs设为false。如果错误就设置样式errs为true,把success设置为false。

在代码中,登陆提示msg的css样式是这样写的:

 <h1 :class="{errs:no,success:is}">{{msg}}</h1>
no和is的默认值都是true,errs引用的是no,success引用的是is。
在js代码中,no和is的值改变的同时也分别改变了errs和success的值。

这里面的css样式代码如下:

技术分享图片

 登录失败结果图:

技术分享图片

 

 

 登录成功结果图:

 技术分享图片

 

Vue实现简单的模拟登陆操作

原文:https://www.cnblogs.com/maleijiejie/p/14818797.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!