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实现密码显示隐藏切换功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！
-
本文向大家介绍vue+elementUi 实现密码显示/隐藏+小图标变化功能，包括了vue+elementUi 实现密码显示/隐藏+小图标变化功能的使用技巧和注意事项，需要的朋友参考一下 vue+elementUi 实现密码显示/隐藏+小图标变化（js一共三行代码，其中一行为了美观）...，先给大家展示下效果图，感觉不错可以参考实现代码。 【效果图】 【html】 【js】 ps:下面看下vue+
-
本文向大家介绍Vue切换div显示隐藏,多选，单选代码解析，包括了Vue切换div显示隐藏,多选，单选代码解析的使用技巧和注意事项，需要的朋友参考一下 切换div显示隐藏 1）单个item下的部分dom结构，显示或隐藏切换，不会修改其它同级dom的显示/隐藏 template dom结构 script js less 样式 2）单个item，显示或隐藏切换，会修改其它同级dom的显示/隐藏。利用v
-
本文向大家介绍js实现简易点击切换显示或隐藏，包括了js实现简易点击切换显示或隐藏的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现简易点击切换显示或隐藏的具体代码，供大家参考，具体内容如下 html: css: js: 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍jQuery实现的导航条切换可显示隐藏，包括了jQuery实现的导航条切换可显示隐藏的使用技巧和注意事项，需要的朋友参考一下 用jQuery实现一些导航条切换，显示隐藏，主要运用的技术有slideToggle( )，toggeClass( )，toggle( ): 代码如下： 效果图：
-
本文向大家介绍Vue隐藏显示、只读实例代码，包括了Vue隐藏显示、只读实例代码的使用技巧和注意事项，需要的朋友参考一下 1.Vue隐藏显示 •v-bind:class=”{hidden: isHidden }” 可动态设置vm.isHidden值 •:class=”{hidden: isHidden }” 简写 2.Vue控件只读 •v-bind:readonly=”isReadOnly” 可动态
-
本文向大家介绍Android中实现EditText密码显示隐藏的方法，包括了Android中实现EditText密码显示隐藏的方法的使用技巧和注意事项，需要的朋友参考一下 在Google发布了support:design:23+以后我们发现有这么一个东西TextInputLayout，先看下效果图： 只要在布局中添加属性app:passwordToggleEnabled=”true”就可以实现当E