• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue实现密码显示隐藏功能的思路详解

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

效果:

思路:

  1. 利用input的type属性,当type值是text的时候展示密码,当type值是password的时候隐藏密码;
  2. 于是很容易想到用v-bind来绑定type,同时用一个布尔值来控制,写成三元表达式的形式;
  3. 加入一个图片元素,点击图标元素切换这个布尔值,就可以达到切换显示隐藏,切换布尔值的同时也切换图标。

页面布局

<div id='app'>
    <!--三元表达式 pwdFlag为真则type是password密码隐藏 pwdFlag为假则type是text密码显示 -->
    密码:<input :type='pwdFlag?"password":"text"' size='10'>
    <!--pwdFlag为真说明密码是隐藏的,显示眼睛打开图标,反之显示眼睛关闭图标-->
       <img :src='pwdFlag?textIcon:pwdIcon' @click="changePwd" style="width:16px;">    
  </div>

JS代码

new Vue({
  el:'#app',
  data:{
    pwdFlag:true,//密码标示 true表示当前是密码形式
    textIcon:'./images/show.jpg',//展示图标
    pwdIcon:'./images/hide.jpg',//隐藏图标
  },
  methods:{
    //改变密码表示
    changePwd:function(){
      //密码标示取反即可
      this.pwdFlag=!this.pwdFlag;
    }
  }
})

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
 
</style>
<body>
  <div id='app'>
    <!--三元表达式 pwdFlag为真则type是password密码隐藏 pwdFlag为假则type是text密码显示 -->
    密码:<input :type='pwdFlag?"password":"text"' size='10'>
    <!--pwdFlag为真说明密码是隐藏的,显示眼睛打开图标,反之显示眼睛关闭图标-->
       <img :src='pwdFlag?textIcon:pwdIcon' @click="changePwd" style="width:16px;">    
  </div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
  el:'#app',
  data:{
    pwdFlag:true,//密码标示 true表示当前是密码形式
    textIcon:'./images/show.jpg',//展示图标
    pwdIcon:'./images/hide.jpg',//隐藏图标
  },
  methods:{
    //改变密码表示
    changePwd:function(){
      //密码标示取反即可
      this.pwdFlag=!this.pwdFlag;
    }
  }
})
 
</script>
</html>

到此这篇关于vue实现密码显示隐藏功能的思路详解的文章就介绍到这了,更多相关vue实现密码显示隐藏内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
nodejs环境快速操作mysql数据库的方法详解发布时间:2022-02-05
下一篇:
一百多行代码实现react拖拽hooks发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap