Detailed explanation of the idea of implementing password display and hiding function in Vue

Effect:

Ideas:

Use the input type attribute to display the password when the type value is text and hide the password when the type value is password;
So it is easy to think of using v-bind to bind the type and use a Boolean value to control it, written in the form of a ternary expression;
Add an image element and click the icon element to switch the Boolean value to achieve the effect of switching display and hiding. Switching the Boolean value also switches the icon.

Page Layout

<div id='app'>
    <!--If the ternary expression pwdFlag is true, type is password and password is hidden. If pwdFlag is false, type is text and password is displayed. -->
    Password: <input :type='pwdFlag?"password":"text"' size='10'>
    <!--pwdFlag is true, indicating that the password is hidden, and the eye-open icon is displayed, otherwise the eye-closed icon is displayed-->
       <img :src='pwdFlag?textIcon:pwdIcon' @click="changePwd" style="width:16px;">    
  </div>

JS code

new Vue({
  el:'#app',
  data:{
    pwdFlag:true,//Password flag true means the current password is in password form textIcon:'./images/show.jpg',//Show icon pwdIcon:'./images/hide.jpg',//Hide icon},
  methods:{
    //Change password representation changePwd:function(){
      //Reverse the password flag this.pwdFlag=!this.pwdFlag;
    }
  }
})

Complete code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
 
</style>
<body>
  <div id='app'>
    <!--If the ternary expression pwdFlag is true, type is password and password is hidden. If pwdFlag is false, type is text and password is displayed. -->
    Password: <input :type='pwdFlag?"password":"text"' size='10'>
    <!--pwdFlag is true, indicating that the password is hidden, and the eye-open icon is displayed, otherwise the eye-closed icon is displayed-->
       <img :src='pwdFlag?textIcon:pwdIcon' @click="changePwd" style="width:16px;">    
  </div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
  el:'#app',
  data:{
    pwdFlag:true,//Password flag true means the current password is in password form textIcon:'./images/show.jpg',//Show icon pwdIcon:'./images/hide.jpg',//Hide icon},
  methods:{
    //Change password representation changePwd:function(){
      //Reverse the password flag this.pwdFlag=!this.pwdFlag;
    }
  }
})
 
</script>
</html>

This concludes this article about the detailed explanation of the idea of implementing password display and hiding functions in Vue. For more relevant content about implementing password display and hiding in Vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Vue implements the display and hiding functions of login password based on iview
vue+elementUi realizes password display/hide+small icon change function
Vue implements the custom component function of password display and hide buttons
Vue implements password display and hide switching function
Vue implements password display and hiding functions based on input

<<: Alibaba Cloud Centos7.3 installation mysql5.7.18 rpm installation tutorial

>>: Linux kernel device driver kernel debugging technical notes collation