vue中密码显示隐藏切换

html:

<group>

<span>设置密码</span>

<x-input :type="this.registration_data.pwdType" placeholder="请填写密码" @on-change="password"></x-input>
 <img :src="this.registration_data.src" @click="changeType()"/>
</group>

script:
data () {

return {

registration_data:{

pwdType:"password",
     src:require("../assets/colse_eyes.png")
    }
}
},
methods:{
changeType(){


this.registration_data.pwdType = this.registration_data.pwdType==='password'?'text':'password';
  this.registration_data.src=this.registration_data.src==require("../assets/colse_eyes.png")?require("../assets/open_eyes.png"):require("../assets/colse_eyes.png");
}
}
注:带小眼睛的睁开闭合。

猜你喜欢

转载自www.cnblogs.com/mengyage/p/9268564.html