密码点击显示和星号隐藏

2020年12月12日 141次阅读 来源: ThinkerWing

《密码点击显示和星号隐藏》

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        input {
            border: 0;
            outline: none;
        }
        
        .inputDiv {
            display: flex;
            font-display: row;
            justify-content: space-between;
            align-items: center;
            width: 250px;
            height: 50px;
            border-bottom: 1px solid grey;
        }
        
        .Account {
            justify-content: flex-start!important;
        }
        
        .inputDiv img {
            height: 20px;
            width: 30px;
            line-height: 30px;
        }
    </style>

    <body>
        <div id="app">
            <div class="mylogin">
                <div class="head">
                    <span>会员登录</span>
                </div>
                <div class="main">
                    <div class="inputDiv Account">
                        <input type="text" placeholder="手机号" />
                    </div>
                    <div class="inputDiv">
                        <input :type="pwdType" class="psd" placeholder="密码" maxlength="20" />
                        <img :src="eyes? icon1 : icon2" @click="changeType()">
                    </div>

                </div>
            </div>
        </div>
        <script>
            new Vue({
                el: "#app",
                data() {
                    return {
                        pwdType: 'password', // 密码类型
                        eyes: "",
                        icon2: "./images/eye.png",
                        icon1: "./images/showEye.png"
                    }
                },
                methods: {
                    changeType() {
                        this.pwdType = this.pwdType === 'password' ? 'text' : 'password';
                        this.eyes = !this.eyes;
                    },
                }
            })
        </script>
    </body>

</html>

 <input :type='pwdType?"password":"text"' class="psd" placeholder="密码" maxlength="20" />
 pwdType: true,
 this.pwdType = !this.pwdType
    原文作者：ThinkerWing
    原文地址: https://blog.csdn.net/daddykei/article/details/107906754
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞