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一些不错的函数脚本代码
Sep 10 Javascript
使用jquery读取html5 localstorage的值的方法
Jan 04 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
ExtJS的拖拽效果示例
Dec 09 Javascript
Jquery实现Div上下移动示例
Apr 23 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 Javascript
jquery插件实现图片悬浮
Apr 16 jQuery
对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中的三元运算符使用说明
2011/07/03 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
转一个日期输入控件,支持FF
2007/04/27 Javascript
用js做一个小游戏平台 (一)
2009/12/29 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
对pandas中apply函数的用法详解
2018/04/10 Python
python使用turtle绘制分形树
2018/06/22 Python
python对html过滤处理的方法
2018/10/21 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
中文专业学生自我评价范文
2014/02/06 职场文书
生物制药专业自我鉴定
2014/02/19 职场文书
成绩单家长评语大全
2014/04/16 职场文书
信息与工商管理职业规划范文:为梦想而搏击
2014/09/11 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
平遥古城导游词
2015/02/03 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python