用替換圖標的方式實現當前高亮

需求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