vue密码明文密文切换

最新推荐文章于 2023-09-26 15:30:55 发布

金翅

最新推荐文章于 2023-09-26 15:30:55 发布

阅读量489

点赞数

分类专栏： vue 文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/qq_37103514/article/details/130007071

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

 .login_eyeClose {
    background: url(~assets/imgs/icon/eye_close.svg) no-repeat center center;
    background-size: 0.28rem;
    width: 0.28rem;
    height: 0.28rem;
    cursor: pointer;
    margin-left: 0.4rem;
}
.login_eyeOpen {
    background: url(~assets/imgs/icon/eye_open.svg) no-repeat center center;
    background-size: 0.28rem;
}

<ul class="p_ul">
	<li class="order_psw">
		<input type="password" class="js_ipt js_psd" ref="appleInput" v-model="password" placeholder="请输入您的密码">
	</li>
	<li class="login_eyeClose" :class="{ 'login_eyeOpen': eyeOpen }" @click="appleToggle"></li>
</ul>

data() {
	 return {
	      password: '', //密码
	      eyeOpen: false, //密码type切换
	  }
},
methods: {
	// 密码type切换
    appleToggle() {
        if (this.eyeOpen) {
            this.eyeOpen = false
            this.$refs.appleInput.type = "password"
        } else {
            this.eyeOpen = true
            this.$refs.appleInput.type = "text"
        }
    }
}