在登录页中经常有点击小眼睛显示和隐藏密码,就是切换输入框的type,原本是password,来回切换type!

div class="account">
    <label class="input_span">
         <span>密码</span>
         <input :type="typePwd" class="inputs" v-model="passWord">
         <span class="iconfont iconjiemao" @click="showPwd"></span>
    </label >
</div>

先在密码输入框中绑定type的值,把值设置可以改变就可以!

export default {
  name: 'HelloWorld',
  data () {
    return {
      typePwd:'password',
      account:'',
      passWord:''
    }
  },
  methods:{
    showPwd (){
      this.typePwd = this.typePwd === 'password' ? 'text' : 'password';
    },
    
  }
}

最后的效果图:

这是没点小眼睛之前密码是隐藏的点击显示后,切换了绑定的type值
每次点击都会在隐藏和切换改变type的类型,当然,你要点击时改变小眼睛的样式,也可以绑定一个class,切换input的type时,把小眼睛的样式也跟着切换! 或者小眼睛是图片,那就切换图片!

Logo

前往低代码交流专区

更多推荐