vue中登录密码的明文和暗文的切换

vue中登录密码的明文和暗文的切换

1.html

<div class="passwordAra">
      <el-input class="putPassword" v-model="password"  name="txtPassword" :type="flag == true?'password':'text'" placeholder="请输入密码" @on-change="password" ></el-input>
      <div class="passwordImg">
          <!-- <img  src="../../static/site/images/houtai/closeLogin@2x.png" alt=""> -->
          <img :src="this.registration_data.src" @click="changeType()" />
      </div>                       
</div>

明文（text）和暗文（password）
利用三元表达式:type=“flag == true?‘password’:‘text’”

2.vue中的js代码

export default{
  data（）{
    return{
    password:'',
    type: 'password',
    flag: true,
    registration_data:{
      pwdType:"password",
      src:require("../../static/site/images/houtai/closeLogin@2x.png")
      },
    }
  },
  methods:{
     changeType(){
           this.flag = !this.flag
        //    this.registration_data.pwdType = this.registration_data.pwdType==='password'?'text':'password';
           this.registration_data.src=this.registration_data.src==require("../../static/site/images/houtai/closeLogin@2x.png")?require("../../static/site/images/houtai/openLogin@2x.png"):require("../../static/site/images/houtai/closeLogin@2x.png");
       },
  }
}

希望可以帮助到正在工作的你–Lby。