Vue 通过修改input的类型,达到密码显示隐藏,还有图标的变化。
显示效果:
html
<li>
<input class="psd" :type="pwdType" placeholder="请输入新密码" @on-change="password" maxlength="18"
v-model="password">
<img :src="openeye" class="eye" alt="" @click="changeType()">
</li>
JavaScript
<script>
export default {
data() {
return {
pwdType: 'password', // 密码类型
openeye: require('@/assets/eye.png'), //图片地址
}
},
methods: {
changeType() {
this.pwdType = this.pwdType === 'password' ? 'text' : 'password';
this.openeye = this.openeye == require("@/assets/eye.png") ? require("@/assets/eye.png") : require("@/assets/neye.png");
},
}
}
</script>