一,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"; } }