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 相关文章推荐
jquery 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
javascript 一个函数对同一元素的多个事件响应
Jul 25 Javascript
Javascript学习笔记5 类和对象
Jan 11 Javascript
js Object2String方便查看js对象内容
Nov 24 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
Mar 23 Javascript
avalon js实现仿微博拖动图片排序
Aug 14 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
JS查找孩子节点简单示例
Jul 25 Javascript
Js利用正则表达式去除字符串的中括号
Nov 23 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
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
javascript 日期常用的方法
2009/11/11 Javascript
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
js数组Array sort方法使用深入分析
2013/02/21 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
vue中使用localstorage来存储页面信息
2017/11/04 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
Python爬取读者并制作成PDF
2015/03/10 Python
python django框架中使用FastDFS分布式文件系统的安装方法
2019/06/10 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
python实现对变位词的判断方法
2020/04/05 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
Linux文件操作命令都有哪些
2016/07/23 面试题
商业融资计划书
2014/04/29 职场文书
应届毕业生自荐信
2014/05/28 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
2015年安全月活动总结
2015/03/26 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
小学运动会报道稿
2015/07/22 职场文书
一起来学习Python的元组和列表
2022/03/13 Python