修改密码（明文密文的转换）

一，HTML

<div class="alertEndTask" id="app">
            <div class="alertstartTask">
                <div class="tasksData height">
                    <div class="title">
                        <p>修改密码</p>
                    </div>
                    <div class="taskContent">
                        <ul ref="menu">
                            <li>
                                <div class="pwd">
                                    <span class="flex_1">旧密码</span>
                                    <div class="passtext flex_2">
                                        <input type="password" class="name" id="1" placeholder="请输入旧密码" />
                                        <button @click="pwdshow(0)">{{textaa}}</button><!--字体格式-->
                                        <img src="../../assets/images/open.png" @click="pwdshow(1)"/><!--图片格式-->
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="pwd">
                                    <span class="flex_1">新密码</span>
                                    <div class="passtext flex_2">
                                        <input type="password" id="2" placeholder="请输入新密码" />
                                        <button @click="pwdshow(1)">{{textaa}}</button>
                                        <img src="../../assets/images/open.png" @click="pwdshow(2)"/><!--图片格式-->
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="pwd">
                                    <span class="flex_1">确认新密码</span>
                                    <div class="passtext flex_2">
                                        <input type="password" id="3" placeholder="确认新密码" />
                                        <button @click="pwdshow(2)">{{textaa}}</button>
                                        <img src="../../assets/images/open.png" @click="pwdshow(3)"/><!--图片格式-->
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>

二，script       

pwdshow(type) {
                        console.log(this)
                        var input = document.getElementsByTagName("input");
                        var btn = document.getElementsByTagName("button");
                        var img=document.getElementsByTagName("img")
                        if ( input[type].type == "password" ) {
                            btn[type].innerHTML = "密文格式";
                            img[type].src=require('../../assets/images/closeEyes.png')
                            input[type].type = "text";
                        } else {
                            btn[type].innerHTML = "明文格式";
                            img[type].src=require('../../assets/images/open.png')
                            input[type].type = "password";
                        }
                    }

 

转载于:https://www.cnblogs.com/liujiajiablog/p/10063050.html