vue中input点击小眼睛显示和隐藏密码
在登录页中经常有点击小眼睛显示和隐藏密码,就是切换输入框的type,原本是password,来回切换type!div class="account"><label class="input_span"><span>密码</span><input :type="typePwd" class="inpu...
·
在登录页中经常有点击小眼睛显示和隐藏密码,就是切换输入框的type,原本是password,来回切换type!
div class="account">
<label class="input_span">
<span>密码</span>
<input :type="typePwd" class="inputs" v-model="passWord">
<span class="iconfont iconjiemao" @click="showPwd"></span>
</label >
</div>
先在密码输入框中绑定type的值,把值设置可以改变就可以!
export default {
name: 'HelloWorld',
data () {
return {
typePwd:'password',
account:'',
passWord:''
}
},
methods:{
showPwd (){
this.typePwd = this.typePwd === 'password' ? 'text' : 'password';
},
}
}
最后的效果图:
每次点击都会在隐藏和切换改变type的类型,当然,你要点击时改变小眼睛的样式,也可以绑定一个class,切换input的type时,把小眼睛的样式也跟着切换! 或者小眼睛是图片,那就切换图片!
更多推荐
已为社区贡献1条内容
所有评论(0)