实现效果：

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

代码：

<!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. vis用于做3D图表的js插件

    vis.js用于做3D图表:(浏览网站需要FQ)实例:http://visjs.org/graph3d_examples.html代码下载:https://github.com/almende/vis

  2. sql从简单到高级

    Ø 基本常用查询 --select select * from student; --all 查询所有 select all sex from student; --distinct 过滤重复 sel ...

  3. （转）不定义JQuery插件，不要说会JQuery

    原文地址:http://www.cnblogs.com/xcj26/p/3345556.html 一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#" ...

  4. ArcGIS Desktop和Engine中对点要素图层Graduated Symbols渲染的实现 Rotation Symbol （转）

    摘要         ArcGIS中,对于要素图层的渲染,支持按照要素字段的值渲染要素的大小,其中Graduated Symbols可以对大小进行分级渲染.在个人开发系统的过程中,也可以用来美化数据显 ...

  5. C#中ref和out的作用和区别

    相同点:方法的定义和调用都必须显示使用ref.out关键字.都会导致参数按引用传递. 不同点:传递给ref关键字的参数必须赋初始值,而out不用.out关键字会清空变量,即使变量已经赋值也不行,退出函 ...

  6. 关于CS0016: Could not write to output file ‘c:\WINDOWS\Microsoft.NET\Framework\v4.0.30319\Temporary AS

    1.添加用户"Network Service” 和 “IIS_IUSERS” 读下面目录的读写权限 a) C:\Windows\Temp b) C:\Windows\Microsoft.NE ...

  7. 关于bootstrap模态框的初始化事件

    转:https://blog.csdn.net/u010181136/article/details/77579823

  8. Vue Vuex state mutations

    Vuex 解决不同组件的数据共享,与数据持久化 1.npm install vuex --save 2.新建store.js 并引入vue vuex ,Vue.use(Vuex) 3.state在vu ...

  9. stegsolve的功能

  10. 洛谷P2766 最长不下降子序列问题（最大流）

    传送门 第一问直接$dp$解决,求出$len$ 然后用$f[i]$表示以$i$为结尾的最长不下降子序列长度,把每一个点拆成$A_i,B_i$两个点,然后从$A_i$向$B_i$连容量为$1$的边 然后 ...