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实现密码显示隐藏切换功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
element ui中表单el-form的label如何设置宽度
这篇文章主要介绍了element ui中表单el-form的label如何设置宽度，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要为大家详细介绍了vue实现表格分页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了在做vue计算属性，v-for处理数组时遇到的一个bug 问题,需要的朋友可以参考下2018-01-01
Vue基于el-breadcrumb实现面包屑功能(操作代码)
这篇文章主要介绍了Vue基于el-breadcrumb实现面包屑功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-09-09
在Vue.js中,计算属性（computed properties）是组件的重要组成部分,它们根据组件的数据自动计算新的值,并在数据变化时自动更新,本文将探讨计算属性的缓存机制,并通过有趣的示例展示如何利用计算属性缓存结果,提升应用性能,需要的朋友可以参考下2025-03-03
插件功能开发完成后，若需要发布到公共组件库中（例如：npmjs），需要对插件进行打包并发布，这篇文章主要介绍了Vue插件打包与发布的方法示例，感兴趣的小伙伴们可以参考一下2018-08-08
这篇文章主要为大家介绍了Vue3源码分析组件挂载创建虚拟节点，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
vue-cli打包后本地运行dist文件中的index.html操作
这篇文章主要介绍了vue-cli打包后本地运行dist文件中的index.html操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要为大家详细介绍了vue+quasar使用递归实现动态多级菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
代替Vue Cli的全新脚手架工具create vue示例解析
这篇文章主要为大家介绍了代替Vue Cli的全新脚手架工具create vue示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
最新评论