实现效果：

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

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link href="css/bootstrap.min.css" rel="stylesheet">
  6.     <script src="js/vue.js"></script>
  7.     <title>Title</title>
  8.     <style>
  9.         #main{
  10.             text-align: center;
  11.             margin-top:60px;
  12.         }
  13.         input[type=text],input[type=password]{
  14.             width:260px;
  15.             height:28px;
  16.             display: inline-block;
  17.         }
  18.         span{
  19.             margin-left:-30px;
  20.             cursor: pointer;
  21.         }
  22.         input[type=checkbox]{
  23.             cursor: pointer;
  24.             opacity: 0;
  25.             margin-left:-18px;
  26.             display: inline-block;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31. <div id="main">
  32.         <input type="text" class="form-control" v-model="msg" v-if="checked">
  33.         <input type="password" class="form-control" v-model="msg" v-else>
  34.         <span class="glyphicon glyphicon-eye-open"></span>
  35.         <input type="checkbox"   v-model="checked">
  36. </div>
  37. <script>
  38.     new Vue({
  39.         el:"#main",
  40.         data:{
  41.             msg:"",
  42.             checked:false
  43.         },
  44.         methods:{
  45.         }
  46.     });
  47. </script>
  48.     <script src="js/jquery.min.js"></script>
  49.     <script src="js/bootstrap.min.js"></script>
  50. </body>
  51. </html>

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

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

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

代码：

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7.         <script src="js/vue.js"></script>
  8.         <script src="js/vue-resource.js"></script>
  9.         <style>
  10.             body{
  11.                 background:white;
  12.             }
  13.             .main{
  14.                 padding-top:50px;width:95%;margin:0 auto;
  15.             }
  16.             .account{
  17.                 border-bottom:1px solid #dfdfdf;padding-top:28px;
  18.             }
  19.             .account input{
  20.                 border:none;font-size:14px;margin-bottom:5px;width:91.5%;height:44px;
  21.             }
  22.             .account i{
  23.                 width:14px;
  24.                 height:14px;
  25.                 line-height:14px;
  26.                 font-size:18px;
  27.                 display:inline-block;
  28.                 color:white;
  29.                 background:#cdcdcd;
  30.                 border-radius:50%;
  31.                 text-align:center;
  32.                 font-style:normal;
  33.             }
  34.             .account .psd{
  35.                 width:81.6%;
  36.             }
  37.             .account span{
  38.                 color:#bfbfbf;float:right;line-height:40px;
  39.             }
  40.         </style>
  41.     </head>
  42.  
  43.     <body>
  44.         <div id="login">
  45.             <div class="main">
  46.                 <div class="account">
  47.                     <input type="password" placeholder="密码" class="psd" v-model="psd" v-if="ifDisplay"/>
  48.                     <input type="text" placeholder="密码" class="psd" v-model="psd" v-else/>
  49.                     <i v-show="psd" @click="clearPassword()">×</i>
  50.                     <span v-show="ifDisplay" @click="ifDisplay=!ifDisplay">隐藏</span>
  51.                     <span v-show="!ifDisplay" @click="ifDisplay=!ifDisplay">显示</span>
  52.                 </div>
  53.             </div>
  54.         </div>
  55.         <script type="text/javascript">
  56.             var vm=new Vue({
  57.                 el:'#login',
  58.                 data:{
  59.                     username:'',
  60.                     psd:'',
  61.                     ifDisplay:false,
  62.                 },
  63.                 methods:{
  64.                     clearPassword:function(){
  65.                         this.psd='';
  66.                     },
  67.                 }
  68.             })
  69.         </script>
  70.     </body>
  71. </html>

vue 实现表单中password输入的显示与隐藏.的更多相关文章

  1. ext当表单中的输入项为必填时，输入项label后显示红色的*

    form表单里,当输入项为必填项时,需要将对应item的allowblank属性设置为true,如果item的label后面自带红色的*,表单中哪些输入项是“必填”,哪些输入项是“非必填”,一眼望去清 ...

  2. Vue项目在表单中限制输入数字

    <template> <div> <input v-model="userPhone" autofocus type="text" ...

  3. vue类似tab切换的效果，显示和隐藏的判断。

    两者切换,动态显示对应的列表详情. 通过v-show的判断 数据驱动

  4. ExtJS4.2学习(17)表单基本输入控件Ext.form.Field（转）

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-12-11/189.html --------------- ...

  5. VUE中登录密码显示与隐藏的最简设计——基于iview

    目录 VUE中登录密码显示与隐藏的最简设计--基于iview 1.背景 2.实现最终效果 2.1 隐藏密码 2.2 显示密码 3.实现思路 3.1 v-if判断当前密码显示状态 3.2 密码隐藏状态 ...

  6. Ant-design-vue—— 表单输入框输入很卡问题

    参考:https://blog.csdn.net/weixin_43905402/article/details/106074435 我的问题:vue项目中使用ant-design-vue,表单中输入 ...

  7. 在vue中下拉框切换事件中改新建表单中的一个值，页面不显示

    事件中改新建表单中的一个值,页面不显示,当另一个对象值发生改变时,这个页面上的值才会显示 由于新建表单是弹窗,在弹出时会重新给每个字段重新赋值,在赋值时没给这个字段赋值(常见新加功能时,加了一个字段, ...

  8. 如何在启用SharePoint浏览器功能的InfoPath 表单中添加托管代码以动态地加载并显示图片

    InfoPath 的浏览器表单不支持加载并显示图片,当然在模板中可以插入图片,但是如果想显示数据库的一幅图片,或是动态加载一张图片就无能为力了. 基实这个问题可以通过在浏览器表单中使用: " ...

  9. BarTender 2016表单中的“秤显示”控件

    BarTender 2016中的表单是一个非常实用的工具,它可以实现数据输出提示,查询提示和同一表单的记录选择.这些都离开可供添加的控件,“秤显示”控件也是我们打印尝尝需要涉及的,今天我们就来看看什么 ...

随机推荐

  1. Hyperledger Fabric1.0 整体结构

    整体结构 Hyperledger Fabric 在 1.0 中,架构已经解耦为三部分: fabric-peer:主要起到 peer 作用,包括 endorser.committer 两种角色: fab ...

  2. 数字图像处理实验（17）：PROJECT 06-04，Color Image Segmentation 标签： 图像处理MATLAB 2017-05-27 21:13

    实验报告: Objective: Color image segmentation is a big issue in image processing. This students need to ...

  3. Spring下面的@Transactional注解标志的讲解

    最近在开发中对Spring中的事务标记@Transactional用的比较多,今天上网收集了一些内容,做一个简单的总结~~~ 在service类前加上@Transactional,声明这个servic ...

  4. git之对比svn

    关于git的发展和历史介绍网上有很多资料,大家可以自行去了解,这里给大家一个传送门git介绍在这里我就不多说了.我们今天本篇文章的定位就是帮助大家来了解一下关于git和svn之间的区别及git的安装. ...

  5. （转）jquery仿天猫商城左侧导航菜单

    原文地址:http://www.cnblogs.com/WinKi/p/3398824.html 之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果 ...

  6. 我用Django搭网站(3)-表单RSA加密

    之前开发项目时因为种种原因一直使用明文提交,表单直接明文提交非常不安全,只要稍加操作就能轻易获取用户的信息.在众里寻他千百度之后决定使用RSA加密方式,简单可靠. 项目准备 一.安装PyCrypto库 ...

  7. Android Butterknife框架 注解攻略

    一.原理. 最近发现一个很好用的开源框架,蛮不错的,可以简化你的代码,是关于注解的.不多说直接进入使用步骤讲解. 二.步骤. 1.准备阶段,先到官网( http://jakewharton.githu ...

  8. 函数LEN()使用方法

    string pro_sql = string.Format("select pr_bianma from tb_products where pr_bianma like '%120201 ...

  9. day3学python 字典+列表集合+文件读取

    字典+列表集合+文件读取 字典示例 ************************ 各地食品的三级菜单************************* 1.使用字典嵌套字典 2.采用死循环思路 3 ...

  10. MVC进阶篇（一）——概览

    前言 说到MVC,就得先说说框架是什么东西,MVC好多人都知道,是Model.view.controller,但是MVC到底是什么样的一个框架呢,好多人又说了是约定大于配置.下面我来说说我的理解. 内 ...