实现效果：

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

代码：

<!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. Solidity部署问题

    Solidity是一个有诸多限制的语言,部署智能合约以及运行都需要gas. 部署的时候如果程序太大,所需要的gas会超过一个区块的上限,这样就没法部署合约.如果用metamask测试的话会弹出以下警告 ...

  2. Monkey测试异常信息解读

    查看包名 1.cmd 下面输入 adb locat > D:\test.txt 2.ctrl+c 停掉刚刚 1 运行的进程 3.打开test.txt文件--搜索  Displayed  对应的内 ...

  3. poj3274 Gold Balanced Lineup(HASH)

    Description Farmer John's N cows (1 ≤ N ≤ 100,000) share many similarities. In fact, FJ has been abl ...

  4. 第一章：HTTP服务器，客户端简易代码解析

    HTTP服务器: 方法{ main service } service:读取HTTP请求信息    解析HTTP请求  决定HTTP相应正文的类型   创建HTTP相应结果  发送HTTP相应结果 读 ...

  5. 【转】android手势处理揭秘

    当滑动(fling)比移动(scroll)有更高的效率时,为什么要让用户使用scroll操作呢?在面积很小而数据又很多的移动设备上,要显示远在后面的那些内容scroll是很困难的,这种情况下fling ...

  6. WPF中XAML的触发器的属性，事件 都有那些？以及如何寻找

    在编写XAML的触发器时,会有属性,事件. 那么这些都是哪里来的呢? 属性,是附加属性或者依赖属性 事件,那就是事件. 如何寻找呢? 很简单,在想要使用的触发器的对象上(也就是有光标的时候)按下F12 ...

  7. Java代码生成16位纯数字的订单号

    //生成16位唯一性的订单号 public static void getUUID(){ //随机生成一位整数 int random = (int) (Math.random()*9+1); Stri ...

  8. Atcoder Grand Contest 031C(构造，思维，异或，DFS)

    #include<bits/stdc++.h>using namespace std;int n,a,b,sum;void dfs(int x,int y,int ban){    if( ...

  9. [AGC005C]Tree Restoring 构造

    Description ​ 给出一个数组a,要求构造一颗树,使节点x距离最远的点的距离为\(a_x\). Input ​ 第一行一个正整数NN(2≤N≤1002≤N≤100) ​ 接下来一行,有NN个 ...

  10. LAMP课程

    LAMP课程 上次课回顾: ls -a:查看全部目录内容 若文件名以“.”开头,则认为是隐藏的文件. ls-l:可以直接用命令 ll命令:ls -l 的别名. ls -m:横向显示文件和目录 ls - ...