vue实现密码显示隐藏切换功能


Posted in Javascript onFebruary 23, 2018

先给大家分享效果图:

vue实现密码显示隐藏切换功能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实现密码显示隐藏切换功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
网页javascript精华代码集
Jan 24 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
onmouseover事件和onmouseout事件全面理解
Aug 15 Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 Javascript
通过bootstrap全面学习less
Nov 09 Javascript
CSS3+JavaScript实现翻页幻灯片效果
Jun 28 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
React全家桶环境搭建过程详解
May 18 Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 Javascript
Node登录权限验证token验证实现的方法示例
May 25 Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 Javascript
对vue.js中this.$emit的深入理解
Feb 23 #Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 #Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 #jQuery
vue中动态绑定表单元素的属性方法
Feb 23 #Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 #Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
Feb 23 #Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 #Javascript
You might like
无数据库的详细域名查询程序PHP版(4)
2006/10/09 PHP
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
php英文单词统计器
2016/06/23 PHP
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
jQuery select操作控制方法小结
2010/05/26 Javascript
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
js中数组Array的一些常用方法总结
2013/08/12 Javascript
简单的js表单验证函数
2013/10/28 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
js常用DOM方法详解
2017/02/04 Javascript
javascript自执行函数
2017/02/10 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
运用jQuery写的验证表单(实例讲解)
2017/07/06 jQuery
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
ES7之Async/await的使用详解
2019/03/28 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
Python实现截屏的函数
2015/07/26 Python
python 字符串和整数的转换方法
2018/06/25 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
python 项目目录结构设置
2020/02/14 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
10个示例带你掌握python中的元组
2020/11/23 Python
基于MUI框架使用HTML5实现的二维码扫描功能
2018/03/01 HTML / CSS
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
高中生自我鉴定范文
2013/10/30 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
小学运动会开幕词
2016/03/04 职场文书
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技