vue实现input 密码切换显示隐藏,日常笔记,记录完成步骤,下次遇到同样的问题可以直接拿来用。
实现效果:
html
<div class="passward">
<input :type="passwordType" class="text-input" v-model="query.pwd" placeholder="请输入密码" />
<img :src="paSrc" alt="" @click="changePassward">
</div>
js
data() {
return {
passwordType: 'password',
paSrc: require("@/assets/images/login_pass_active.png"),
}
}
点击小眼睛按钮:
// 切换密码显示隐藏
changePassward() {
this.passwordType = this.passwordType==='password'?'text':'password';
this.paSrc = this.paSrc == require("@/assets/images/login_pass_active.png")?require('@/assets/images/login_pass.png'):require("@/assets/images/login_pass_active.png");
},
网友评论