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 相关文章推荐
表单的一些基本用法与技巧
Jul 15 Javascript
Dom 结点创建 基础知识
Oct 01 Javascript
js去空格技巧分别去字符串前后、左右空格
Oct 21 Javascript
jQuery中on()方法用法实例详解
Feb 06 Javascript
jquery遍历table的tr获取td的值实现方法
May 19 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
基于JavaScript实现的快速排序算法分析
Apr 14 Javascript
vue axios请求超时的正确处理方法
Apr 02 Javascript
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
微信打开网址添加在浏览器中打开提示的办法
May 20 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
Vue export import 导入导出的多种方式与区别介绍
Feb 12 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 正则表达式的学习探讨
2013/06/06 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
php集成动态口令认证
2016/07/21 PHP
PHP实现小偷程序实例
2016/10/31 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
JavaScript 全角转半角部分
2009/10/28 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
实时获取Python的print输出流方法
2019/01/07 Python
python异常触发及自定义异常类解析
2019/08/06 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
Python 中@property的用法详解
2020/01/15 Python
Python argparse模块使用方法解析
2020/02/20 Python
通过Python实现一个简单的html页面
2020/05/16 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
Pureology官网:为染色头发打造最好的产品
2019/09/13 全球购物
酒店服务员岗位职责
2015/02/09 职场文书
环境卫生标语
2015/08/03 职场文书
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js