标签：false remember 登录 autologin 密码 自动 高亮 替换 图标
需求1：实现输入框获取焦点时高亮
需求2：实现表单验证
需求3：实现通过绑定样式改变样式图标的方式实现高亮
需求1核心代码如下：
<div class="form">
<div class="input">
<label for="username">用户名</label>
<input type="text" name="username" id="user" v-validate="{required:true,max:6,min:4}" :class="{highlight:green==1,error:errors.has('username')}" @click="green=1">
</div>
<div class="input" >
<label for="password">密码</label>
<input type="password" name="password" id="pass" :class="{highlight:green==2,error:errors.has('password')}" v-validate="{required:true,max:6,min:4}" @click="green=2">
</div>
.highlight{
border: 2px solid green;
}
green这个变量需要在data里面声明一下初始值
需求2核心代码如下：
先npm下载插件 npm install vee-validate --save
然后在引入到main.js中使用
import VeeValidate, { Validator } from 'vee-validate';
Vue.use(VeeValidate);
<div class="form">
<div class="input">
<label for="username">用户名</label>
<input type="text" name="username" id="user" v-validate="{required:true,max:6,min:4}" :class="{highlight:green==1,error:errors.has('username')}" @click="green=1">
</div>
<div class="input" >
<label for="password">密码</label>
<input type="password" name="password" id="pass" :class="{highlight:green==2,error:errors.has('password')}" v-validate="{required:true,max:6,min:4}" @click="green=2">
</div>
<span class="errTips" v-show="errors.has('password')">
{{ errors.first('password')}}
</span>
<span class="errTips" v-show="errors.has('username')">
{{ errors.first('username')}}
</span>
需求3核心实现代码
<div class="test">
<div class="rember" @click="rememberSet" :class="{active:remember}">
<span class="iconfont" :class="{'icon-kuang':!remember,'icon-android-checkbox':remember}">记住密码</span>
</div>
<div class="autoLogin" @click="autoLogin" :class="{active:autologin}">
<span class="iconfont" :class="{'icon-kuang':!autologin,'icon-android-checkbox':autologin}">自动登录</span>
</div>
</div>
rememberSet(){
this.remember =!this.remember
this.remember ||(this.autologin =false)
},
autoLogin(){
this.autologin =!this.autologin
this.autologin && (this.remember=true)
},
下面这段代码的实现需求是，当我点击自动登陆的时候，也就是autologin为true时自动登录也勾选上，当不勾选记住密码时自动登录也不勾上，也就是当remember为false时自动登录也为false
标签：false,remember,登录,autologin,密码,自动,高亮,替换,图标
来源： https://www.cnblogs.com/bbldhf/p/11336911.html
本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。
