How does Vue implement the function of verifying whether a user name is available?
This article mainly introduces "Vue how to achieve the function of verifying the availability of the user name". In the daily operation, I believe that many people have doubts about how to achieve the function of verifying the availability of the user name in Vue. The editor consulted all kinds of materials and sorted out a simple and easy-to-use method of operation. I hope it will be helpful for everyone to answer the question of "how to achieve the function of verifying the availability of the user name by Vue". Next, please follow the editor to study!
When you enter a name in the input box, verify whether it exists when you lose focus, and prompt you to re-enter if it already exists, and if it doesn't exist, you can use it.
The code is as follows
Listener case {{span1}} / / listeners listen for current data changes. When the data in the text box loses focus, / / take the value in the text box to the background to operate, and judge according to the data returned by the background. Thus giving the prompt var vm = new Vue ({el: "# app", data: {msg: ", span1:",} Methods: {show1: function (val) {/ / the val in this place is the value / / in the text box to execute the asynchronous request Go to the background to get data, and simulate to go to the background to get data var that = this / / because there is also a this object in setTimeout, and the this object is the document object setTimeout (function () {/ / if val is written in it, he will not enter the if of if (val = = "aaa") {that.span1 = "user name cannot be used, please change it" } else {that.span1 = "username can be used";}}, 2000);}}, watch: {msg: function (val) {this.show1 (val) This.span1 = "verifying";},}})
The effect is as follows
At this point, the study on "how Vue implements the function of verifying whether the user name is available" is over. I hope to be able to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
