vue实现密码显示隐藏切换功能
更新时间：2018年02月23日 11:03:38 作者：红叶1994
这篇文章主要介绍了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实现密码显示隐藏切换功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
在日常开发中,弹窗是常见的一个功能,本文主要介绍了vue3使用useDialog实现对话框的示例代码,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
这篇文章主要介绍了如何使用vue-router插件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了vuex状态管理数据状态查询与更改方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue.js如何获取data-*的值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要为大家详细介绍了vue+elementUI组件table实现前端分页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
Vue作为一款流行的前端框架,已经在许多项目中得到广泛应用,然而,随着我们在Vue中构建更大规模的应用程序,我们可能会遇到一个严重的问题,那就是内存泄漏,因此,我们需要认识到在Vue开发过程中,内存泄漏问题的重要性,本文将给大家介绍如何解决和预防内存泄漏问题2023-10-10
这篇文章主要为大家详细介绍了vue实现小球滑动交叉，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要为大家详细介绍了Vue实现登陆跳转，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
这篇文章主要为大家详细介绍了vue富文本编辑器组件vue-quill-edit的使用教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-09-09
这篇文章主要介绍了element的el-table中记录滚动条位置的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
最新评论