实现效果：

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

代码：

<!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. MRPT - Mobile Robot Programming Toolkit

    1. https://www.mrpt.org/Building_and_Installing_Instructions#1_Prerequisites P1. error C2371: “int32 ...

  2. Installing R under Unix-alikes

    Linux上R的安装 可参考https://cran.r-project.org/doc/manuals/r-release/R-admin.html#Installing-R-under-Unix_ ...

  3. Luogu 4213 【模板】杜教筛（Sum）

    当作杜教筛的笔记吧. 杜教筛 要求一个积性函数$f(i)$的前缀和,现在这个东西并不是很好算,那么我们考虑让它卷上另外一个积性函数$g(i)$,使$(f * g)$的前缀和变得方便计算,然后再反推出这 ...

  4. C/C++预处理指令常见的预处理指令

    C/C++预处理指令常见的预处理指令如下: #空指令,无任何效果 #include包含一个源代码文件 #define定义宏 #undef取消已定义的宏 #if如果给定条件为真,则编译下面代码 #ifd ...

  5. css总结2：Flex 布局教程：Flex 语法（转）

    Flex 布局教程:语法篇 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些 ...

  6. 三年经验的C，超过两题答不出请离开软件界

    1.double free是什么问题?申请地址与释放地址不一致会有什么问题? 2.main函数最多有几个参数?各是什么作用? 3.crt是什么?编译器是怎么样连接crt的(描述cl或者gcc方式) 4 ...

  7. (转)初试konckout+webapi简单实现增删改查

    原文地址:http://www.cnblogs.com/flykai/p/3361064.html 前言 konckout.js本人也是刚刚接触,也是初学,本文的目的是使用ko和asp.net mvc ...

  8. PHP 去掉emoji字符

    function isMatchEmoji($str) { $pattern='/./u'; $rs=preg_match_all($pattern,$str,$match); if($rs>0 ...

  9. React+gulp+browserify模块化开发

    阅读本文需要有React的基础知识,可以在React 入门实例教程和React中文官网进行基础学习. 没有React基础也可以学习本文,本文主要不是学习React,而是gulp+browserify进 ...

  10. C# 筛选string 类型里面的汉字，获取首字母字母，正则表达式Regex 常用验证

    界面效果 1.提取汉字 private void buttonX1_Click(object sender, EventArgs e) { if (TxtYuan.Text.Trim() != &qu ...