[html] 写一个密码默认星号，但可以查看密码的输入框

[html] 写一个密码默认星号，但可以查看密码的输入框

<i class="icon-password"></i>
<input type="text" v-if="pwdType" v-model="eyeTxt" />
<input type="password" placeholder="输入新密码" v-model="eyeTxt" v-else />
<img :src="seen ? seenImg : unseenImg" @click="changeType()" v-on:mouseover="hoverEye" v-on:mouseout="outEye" class="icon-eye" />

<script>
export default {
  data() {
    return {
      seen: "",
      unseenImg: require("../../assets/pics/see0.svg"),   //看不见密码时小眼睛的显示图片地址
      seenImg: require("../../assets/pics/see1.svg"),   //看得见密码时小眼睛的显示图片地址
      eyeTxt: "",
      pwdType: false   //此时文本框隐藏，显示密码框 
    };
  },
  methods: {
  	changeType: function() {
     	this.seen = !this.seen;   //小眼睛的变化
     	this.pwdType = !this.pwdType;   //跟着小眼睛变化，密码框隐藏，显示文本框 内容就显示了
    },
    hoverEye: function(event) {
    	this.seen = !this.seen;
    },
    outEye: function(event) {
    	this.seen = !this.seen;
    }
  }
};
</script>

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题