实现效果：

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

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link href="css/bootstrap.min.css" 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输入的显示与隐藏.的更多相关文章

  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. 面试题:Java程序员最常用的20％技术 已看1

    首先常用api(String,StringBuffer/StringBuilder等) 1.集合类,线程类 2.Servlet(很少用纯粹的servlet写,但你要懂,因为很多框架都是基于servle ...

  2. ssh -X前设置DISPLAY=localhost:0

    如果是在windows上用XMing做XServer,前面的localhost不能省,否则会被当作一个unix domain socket,而XMing没有实现这个功能,所以会出错 connect / ...

  3. You-need-to-know-css

    半透明边框 背景知识: background-clip <div class="main"> <input id="pb" type=&quo ...

  4. js-day

    1.克莱托指数 公式 :体重(kg) / (身高(m) * 身高(m)) < 20 : 偏瘦 > 20 <25 : 正常 > 25 : 偏旁 步骤: 1.输入体重(weight ...

  5. vs2012 许可 tfs 许可

    Team Foundation Server 2012序列号或MSDN版本 BVGTF-T7MVR-TP46H-9Q97G-XBXRB VS2012注册码 亲测成功.我的是旗舰版... YKCW6-B ...

  6. [Lua快速了解一下]Lua运行

    -Lua的Hello World print("Hello World") 分号可选 -类似python,进入Lua后再shell中打命令执行语句也可 > print(&qu ...

  7. Ubuntu16.04切换python3和python2

    切换Python3为默认版本: sudo update-alternatives --install /usr/bin/python python /usr/bin/python2 100 sudo ...

  8. c# 解析MP3文件

    不说那么多,网上有很多关于MP3文件说明的. 该C#代码是将C\C++转化过来的,可能存在问题. 如有需要的朋友可以参考. 项目中的文件路径大家自己修改. 下载地址

  9. My97DatePicker常用日期格式

    WdatePicker({ minDate: '%y-%M-%d', maxDate: '#F{$dp.$D(\'GradeEndDate\',{d:-1});}' }); WdatePicker({ ...

  10. JMeter的使用——ApacheJMeterTemporaryRootCA.crt的用法

    在使用JMeter的时候,启动HTTP代理服务器弹出的那个提示框一直不知道是什么意思,刚刚弄明白了,在JMeter2.1之后,通过JMeter的代理服务器来访问https安全连接的网页的时候,浏览器会 ...