这篇文章主要为大家详细介绍了vue实现密码显示隐藏切换功能,具有一定的参考价值,可以用来参考一下。
感兴趣的小伙伴,下面一起跟随四海网的小编两巴掌来看看吧!
【q1010.com温馨提示:图片暂缺】【q1010.com温馨提示:图片暂缺】
代码如下:
<group>
<span>设置密码</span>
<x-input :type="this.registration_data.pwdType" placeholder="请填写密码" @on-change="password"></x-input>
<img :src="this.registration_data.src" @click="changeType()"/>
</group>
代码如下:
data () {
return {
registration_data:{
pwdType:"password",
src:require("../assets/colse_eyes.png")
}
}
},
methods:{
changeType(){
this.registration_data.pwdType = this.registration_data.pwdType==='password'?'text':'password';
this.registration_data.src=this.registration_data.src==require("../assets/colse_eyes.png")?require("../assets/open_eyes.png"):require("../assets/colse_eyes.png");
}
}
注:带小眼睛的睁开闭合。
以上所述是小编给大家介绍的vue实现密码显示隐藏切换功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对四海网网站的支持!
本文来自:http://www.q1010.com/184/4569-0.html
注:关于vue实现密码显示隐藏切换功能的内容就先介绍到这里,更多相关文章的可以留意四海网的其他信息。
关键词:vue.js
四海网收集整理一些常用的php代码,JS代码,数据库mysql等技术文章。