Shulou(Shulou.com)06/02 Report--

Vue based on input how to achieve password display and hiding function, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can get something.

Preface

As we all know, in general, we can't see the password in the input box. Only when we click on the small icon to view the password, the password will show up, and it will be very easy to implement. You can change the type property of input by clicking the icon. But hidden passwords are usually displayed, so what should we do if we want to show them with "*" or other symbols? today, we will teach you to use other symbols instead of "" to display when the password is hidden.

Realize the effect

Realization idea

1. First, we need to define a variable in data to control the display and hiding of small icons.

two。 Loop through the privates (key content) in data on the page to get the length length of the string

3. After you get the length of the key, split it into an array of strings for later insertion

4. Then insert into the string array through the splice method, splice has three parameters, the first parameter is necessary, is the position of the inserted element, the second parameter means the number of elements to be inserted, and the third parameter means what the element is to insert

5. Finally, we can convert the string array to a string through the join method.

Without saying much, go directly to the example code.

{{privates}} {{star}}

Export default {data () {return {privates: "123456789123456789123456789", / / key content codeType: 0, / / Control key display hide equals 1 display Hide star: "", / / Star to be inserted *}} when equal to 0, and mounted () {/ / Loop through the length of the key for (var I = 0) I < this.privates.length Let star +) {let star = this.star.split ('') / / split into a string array star.splice (this.privates.length, this.privates.length,'*') / / add to the array this.star = star.join ('') / / convert the array to a string}} Methods: {/ / Show event reveal () {this.codeType = 0}, / / hide event conceal () {this.codeType = 1},}} .private {display: flex Align-items: center;} .private img {width: 20px; height: 20px; vertical-align: middle; cursor: pointer; margin-left: 9px;} .Special {position: relative; top: 4px;}

At this point, this small function has been realized!

Add: how to display and hide the switch password in vue

1. Vue realizes the display and hiding of switching passwords

1. Define showPwd in data, which defaults to false, to control the display and concealment of passwords. Define pwd, which is empty by default and is the value of the password. The code is as follows:

Data () {return {showPwd: false, pwd:''}}

two。 In the display and hiding of passwords, there are two input boxes, one is a text box of type text to show passwords, and the other is a password box of type password to hide passwords. Since the default value of showPwd is false, the box for setting text is v-if, the password is displayed by default, while the box for setting password is v-else, and the password is not displayed by default. At the same time, the bidirectional data binding of v-model is also performed, binding the value of pwd. The code is as follows:

3. On the button next to the control, bind the object style to display different styles, and bind the click event to assign the value of! showPwd to showPwd. In the following display, different text is displayed by different showPwd values, as shown in the following code:

{{showPwd? Abc': is it helpful for you to read the above content after reading it? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.