基于vue 实现表单中password输入的显示与隐藏功能

实现效果：

点击 “眼睛” 的时候显示与隐藏

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link href="css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
  <script src="js/vue.js"></script>
  <title>Title</title>
  <style>
    #main{
      text-align: center;
      margin-top:60px;
    }
    input[type=text],input[type=password]{
      width:260px;
      height:28px;
      display: inline-block;
    }
    span{
      margin-left:-30px;
      cursor: pointer;
    }
    input[type=checkbox]{
      cursor: pointer;
      opacity: 0;
      margin-left:-18px;
      display: inline-block;
    }
  </style>
</head>
<body>
<div id="main">
    <input type="text" class="form-control" v-model="msg" v-if="checked">
    <input type="password" class="form-control" v-model="msg" v-else>
    <span class="glyphicon glyphicon-eye-open"></span>
    <input type="checkbox"  v-model="checked">
</div>
<script>
  new Vue({
    el:"#main",
    data:{
      msg:"",
      checked:false
    },
    methods:{
    }
  });
</script>
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>
</html>

=====================================

登录页面input输入密码显示与隐藏实现：

效果（点击显示与隐藏进行切换）：

代码：

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="js/vue.js"></script>
    <script src="js/vue-resource.js"></script>
    <style>
      body{
        background:white;
      }
      .main{
        padding-top:50px;width:95%;margin:0 auto;
      }
      .account{
        border-bottom:1px solid #dfdfdf;padding-top:28px;
      }
      .account input{
        border:none;font-size:14px;margin-bottom:5px;width:91.5%;height:44px;
      }
      .account i{
        width:14px;
        height:14px;
        line-height:14px;
        font-size:18px;
        display:inline-block;
        color:white;
        background:#cdcdcd;
        border-radius:50%;
        text-align:center;
        font-style:normal;
      }
      .account .psd{
        width:81.6%;
      }
      .account span{
        color:#bfbfbf;float:right;line-height:40px;
      }
    </style>
  </head>

  <body>
    <div id="login">
      <div class="main">
        <div class="account">
          <input type="password" placeholder="密码" class="psd" v-model="psd" v-if="ifDisplay"/>
          <input type="text" placeholder="密码" class="psd" v-model="psd" v-else/>
          <i v-show="psd" @click="clearPassword()">×</i>
          <span v-show="ifDisplay" @click="ifDisplay=!ifDisplay">隐藏</span>
          <span v-show="!ifDisplay" @click="ifDisplay=!ifDisplay">显示</span>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      var vm=new Vue({
        el:'#login',
        data:{
          username:'',
          psd:'',
          ifDisplay:false,
        },
        methods:{
          clearPassword:function(){
            this.psd='';
          },
        }
      })
    </script>
  </body>
</html>

总结

以上所述是小编给大家介绍的基于vue 实现表单中password输入的显示与隐藏功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • vue组件表单数据回显验证及提交的实例代码

    最近项目需要到vue开发单页面,所以就研究一下表单数据的回显,验证及提交如何用vue组件的方式实现. 代码如下: <template> <div class="index"> <!--header-bar></header-bar--> <div style="margin:20px;"> <div class="item"> <p>住户名称:</p>

  • vue表单验证你真的会了吗？vue表单验证（form）validate

    前言 很久没有写文章了,学习了一下webpack,基础的一些组件,今天带来form表单验证组件(element.iviewui)的一期教程(作为一个菜鸡毕竟经历众多项目可以给一些新手一点提示 (QQ群技术讨论)838293023备注(github进来的 github 技术文档技术文档会持续更新 效果图 1.原理解释 考虑 我们看一下我们可以用form去整体触发校验也可以单个input来触发form-item 进行校验 童鞋们现在可能感觉还是没懂,没关系继续往下看. 2.派发和广播 为什么要用广播

  • vue form 表单提交后刷新页面的方法

    最近做的项目中,有增删改表格功能,在操作后需要实时更新页面数据.下面可以这样解决. 1.在methods中 定义好一个初始化渲染实例. 例如 lnitializationData(){//初始化页面数据 this.$http.get("/permit/specific", { params: { page: this.localPage, size: this.msg.pagNumber, } }, {emulateJSON: true} ).then((response) =>

  • vue elementui form表单验证的实现

    vue elementui form表单验证的实现

    最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周 就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正,多多交流才能共同进步! 1.问题 我们公司的项目比较大 表格 表单的页面都不胜数 ,基于此封装了一些 可复用的代码. 2.分析  vue给了我们不一样的前端代码体验  element ui 给我们一套功能强大的组件 减少了我们大量的开发时间 .双剑合璧 天下无敌!  但每个公司的代码风格不同  用户

  • 详解vue如何使用rules对表单字段进行校验

    1.在代码中,添加属性::rule <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit" class="form-con"> <FormItem prop="phone"> <Input v-model="form.phone&

  • 基于vue 实现表单中password输入的显示与隐藏功能

    实现效果: 点击 "眼睛" 的时候显示与隐藏 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">

  • 关于element-ui表单中限制输入纯数字的解决方式

    我就废话不多说了,大家还是直接看代码吧~ <input type="text" class="el-input__inner" oninput = "value=value.replace(/[^\d]/g,'')" > 补充知识:element form表单验证(数字,手机号,邮箱) 我就废话不多说了,大家还是直接看代码吧~ <template> <div class="hello"> &

  • 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基于input实现密码的显示与隐藏功能

    vue基于input实现密码的显示与隐藏功能

    前言 大家都知道,一般情况下,输入框的密码我们是看不到密码的,只有当我们点击查看密码的小图标时,密码才会显现出来,实现起来也非常简单,通过点击图标让input的type属性变化即可.但是隐藏的密码一般是 "•" 展示,那我们想要用 "*" 或者其他的符号显示该怎么办呢,今天就教大家用其他的符号代替 "•" 在密码隐藏时展示. 实现效果 实现思路 1.首先我们要先在data中定义一个变量用来控制小图标的显示与隐藏:2.在页面中循环遍历data中的p

  • 基于Vue实现tab栏切换内容不断实时刷新数据功能

    基于Vue实现tab栏切换内容不断实时刷新数据功能

    先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax请求,防止阻塞,首次加载页面的时候又不能5个ajax同时请求,只需要请求第一个就好 也没有必要建立5个区域,控制显示隐藏,浪费性能,业务代码就不贴了,把大概原理的代码贴上来 先是用jq实现了一版 <!DOCTYPE html> <html lang="en"> &l

  • 微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能（函数防抖）

    一.函数节流(throttle) **函数节流:一个函数执行一次后,只有大于设定的执行周期后才会执行第二次**.有个需要频繁触发函数,出于优化性能角度,在规定时间内,只让函数触发的第一次生效,后面不生效. ### 1.如何实现 其原理是用时间戳来判断是否已到回调该执行时间,记录上次执行的时间戳,然后每次触发 scroll 事件执行回调,回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段,如果是,则执行,并更新上次执行的时间戳,如此循环: function throttle(fn

  • vue实现的上传图片到数据库并显示到页面功能示例

    本文实例讲述了vue实现的上传图片到数据库并显示到页面功能.分享给大家供大家参考,具体如下: 1.点击上传图片,弹出选择图片选项框. 页面代码: <div class="form-signin-heading" id="btnUpload" @change="upload">上传图片</div> <input type="file" name="avatar" id="

  • vue.js使用v-if实现显示与隐藏功能示例

    vue.js使用v-if实现显示与隐藏功能示例

    本文实例讲述了vue.js使用v-if实现显示与隐藏功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1

  • 基于PyQt5实现状态栏(statusBar)显示和隐藏功能

    首先,讲述要解决的两个问题以及解决问题的代码: 1.将鼠标放置于菜单栏上状态栏永久消失的问题(这个问题需要仔细观察才能注意到) # 此覆盖父类函数: 覆盖方法: 为了克服 将鼠标放置于菜单栏上 状态栏就消失的问题: def event(self, QEvent): if QEvent.type() == QEvent.StatusTip: if QEvent.tip() == "": QEvent = QStatusTipEvent("ready!") # 此处为要

  • vue+elementui实现动态控制表格列的显示和隐藏

    vue+elementui(table,多选框)实现动态控制表格列的显示和隐藏,供大家参考,具体内容如下 imdex.vue <template>   <div>     <div>       <el-table :data="tableData" border style="width: 100%" ref="table">         <el-table-column prop=&q

随机推荐