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

效果：

思路：

  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)

相关推荐

  • vue实现密码显示与隐藏按钮的自定义组件功能

    思路 实现该组件有两个思路,一个使用v-model进行双向绑定,一个是使用prop的.sync修饰符.父子组件通信. 1.v-model形式 v-model的实现需要在自定义组件中自定义一个inputvalue值,因为vue中的父子组件传递机制问题,在组件中直接修改props注入的key字段时,vue会给出错误.子组件中定义inputvalue字段,用于子组件中input元素的值的双向绑定,子组件中的input数据绑定可以使用v-model,也可以使用实现v-model的原理语法糖,下面两种方式

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

    先给大家分享效果图: 具体实现代码如下所示: html: <group> <span>设置密码</span> <x-input :type="this.registration_data.pwdType" placeholder="请填写密码" @on-change="password"></x-input> <img :src="this.registration_da

  • vue+elementUi 实现密码显示/隐藏+小图标变化功能

    vue+elementUi 实现密码显示/隐藏+小图标变化(js一共三行代码,其中一行为了美观)...,先给大家展示下效果图,感觉不错可以参考实现代码. [效果图] [html] // 前后代码[略] <el-form-item label="密码" prop="pwd"> <el-input v-model="ruleForm.pwd" :type="pwdType" placeholder="请

  • Vue基于iview实现登录密码的显示与隐藏功能

    Vue基于iview实现登录密码的显示与隐藏功能

    目录 1.背景 2.实现最终效果 2.1 隐藏密码 2.2 显示密码 3.实现思路 3.1 v-if判断当前密码显示状态 3.2 密码隐藏状态 3.3 密码显示状态 3.4 两种眼睛图标(睁眼,闭眼)的监听切换密码显示状态事件 4.小结 iview简介 iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品. 1.背景 近期,在使用abp开发项目过程中,前端vue输入登录密码时默认隐藏,但是如果用户输错密码需要切换显示跟隐藏.故有此文. 2.实现最终效果

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

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

    效果: 思路: 利用input的type属性,当type值是text的时候展示密码,当type值是password的时候隐藏密码: 于是很容易想到用v-bind来绑定type,同时用一个布尔值来控制,写成三元表达式的形式: 加入一个图片元素,点击图标元素切换这个布尔值,就可以达到切换显示隐藏,切换布尔值的同时也切换图标. 页面布局 <div id='app'> <!--三元表达式 pwdFlag为真则type是password密码隐藏 pwdFlag为假则type是text密码显示 --

  • Vue中设置登录验证拦截功能的思路详解

    目录 一.解决思路 二.让浏览器存储服务器返回的token 三.在请求中设置访问权限 四.封装登录验证 Hello,你好呀,我是灰小猿,一个超会写bug的程序猿! 今天在做vue和springboot交互的一个项目的时候,想要基于前端实现一些只有登录验证之后才能访问某些页面的操作,所以在这里总结一下实现该功能的一个解决方案, 首先说一下我是如何判断是否已经登录的, 一.解决思路 由于在我的springboot后台采用的shiro+Jwt安全框架,所以会在登录之后反馈给前端一个token,并且前端

  • 基于Vue实现图片在指定区域内移动的思路详解

    当图片比要显示的区域大时,需要将多余的部分隐藏掉,我们可以通过绝对定位来实现,并通过动态修改图片的left值和top值从而实现图片的移动.具体实现效果如下图,如果我们移动的是div 实现思路相仿. 此处需要注意的是 我们在移动图片时,需要通过draggable="false" 将图片的 <img src="/static/pano-dev/test/image-2.jpg" draggable="false" />,否则按下鼠标监听o

  • 原生js实现拖拽功能基本思路详解

    如果要设置物体拖拽,那么必须使用三个事件,并且这三个事件的使用顺序不能颠倒. 1.onmousedown:鼠标按下事件 2.onmousemove:鼠标移动事件 3.onmouseup:鼠标抬起事件 拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素.鼠标的移动也就是x.y坐标的变化;元素的移动就是style.position的 top和left的改变.当然,并不是任何时候移动鼠标都要造成元素的移动,而应该判断鼠标左键的状态是否为按下状态,是否是在可拖拽的元素上按下的. 基本思路如下: 拖拽状态

  • vue单页开发父子组件传值思路详解

    vue单页开发时经常需要父子组件之间传值,自己用过但是不是很熟练,这里我抽空整理了一下思路,写写自己的总结. GitHub地址:https://github.com/leileibrother/wechat-vue 文件目录如下图,example.vue是父组件,exampleChild.vue是子组件. 父组件引入子组件,父组件html的代码如下: <template> <div> <h3>这是父组件</h3> <p style="marg

  • python实现密码验证合格程序的思路详解

    题目描述 输入一行或多行字符串密码,验证每行密码是否符合规范,符合提示"OK",否则"NG".密码规范为: 1.长度超过8位 2.包括大小写字母.数字.其它符号,以上四种至少三种 3.不能有相同长度超2的子串重复 解题思路 1.获取输入的多行字符串 2.对每行字符串进行密码验证: 1)如果密码长度小于等于8或者是密码中有长度超过2的重复子串,则密码NG 2)在1)不满足的情况下再看有没有至少包含大写字母.小写字母.数字.其他符号 python代码实现 import

  • webpack构建换肤功能的思路详解

    最近项目中要实现一个换肤的功能,大体想了下,记录一下思路 要实现换肤功能,目标就是打包生成多份皮肤文件,需要哪个就用哪个 打包生成多份皮肤文件因为项目是使用webpack构建的,要想生成多份css文件,就要在入口中配置多个入口文件,每个入口文件会提取出一个css文件 config.entry={ app: ['./src/app.js'], defaultTheme: ['./src/theme.default.color.js'], orangeTheme:['./src/theme.oran

  • Vue.js实现开发购物车功能的方法详解

    Vue.js实现开发购物车功能的方法详解

    本文实例讲述了Vue.js实现开发购物车功能的方法.分享给大家供大家参考,具体如下: 购物车一般包含商品名称.单价.数量等信息,数量可以任意新增或减少,商品项也可删除,还可以支持全选或多选: 我们把这个小项目分为三个文件: index.html (页面) index.js (Vue 脚本) style.css (样式) 1 index.js 首先在 js 中初始化 Vue 实例,整体模板如下: var app = new Vue({ el: '#app', data: { ... }, moun

随机推荐