vue实现密码显示隐藏切换功能
时间:2021-05-04 10:50:03|栏目:vue|点击: 次
先给大家分享效果图:
具体实现代码如下所示:
html:
<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>
script:
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-router中scrollBehavior的巧妙用法
栏 目:vue
下一篇:vue-awesome-swiper滑块插件使用方法详解
本文标题:vue实现密码显示隐藏切换功能
本文地址:http://www.codeinn.net/misctech/114535.html