Vue登录密码的显示隐藏

在写这篇博客的时候，我还在加班，实现了一个小功能，这个功能非常常见，第一次做实现了就记录下来。

项目用的是VUE的Vant组件库，具体实现如下：

HTML：

  <van-field 
          placeholder="请输入手机号/用户名/邮箱名"
          clearable
          maxlength="11"
          v-model="usercode"              
          class="phoneinput"           
      >    
      <img slot="left-icon" src="../../assets/pictures/username@2x.png">
      </van-field>      
      <van-field                    
          maxlength="20"
          :type="seen?'password':'text'"
          v-model="pwd"         
          placeholder="请输入密码"
          class="pwdinput"
      >  
        <img slot="left-icon" src="../../assets/pictures/pwd@2x.png">             
        <img slot="right-icon" v-if="eye" @click="changeSeen"  src="../../assets/pictures/look@2x.png" >       
      </van-field>

TS：

  data(){
       return{
          usercode:"" ,
          pwd:"",
          type:"password",
          code:"",
          seen:"password",
          eye:true,        
           loginUser: {
            usercode: '',
            pwd: '',
            code:'134564'
          },       
      }
    },
  methods: {
    //点击图标看密码
    changeSeen(){
      this.type = this.seen ? 'password' : 'text';
      this.seen = !this.seen;
    }
}

标签：code,usercode,登录,密码,pwd,Vue,seen,password,type
来源： https://blog.csdn.net/Sophia_0331/article/details/101389631