vue密码明文密文切换

 .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"
        }
    }
}

你可能感兴趣的:(vue,vue.js,javascript,html)