![《密码点击显示和星号隐藏》](https://ddrvcn.oss-cn-hangzhou.aliyuncs.com/2022/07/7959457213715902904.gif)
<!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