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

Editor to share with you vue.js how to achieve two-level drop-down suspension menu, I hope you have something to gain after reading this article, let's discuss it together!

Vue.js to achieve two-level drop-down suspension menu method: 1, to complete the mouse suspension to appear a new div effect; 2, to achieve the mouse through the personal profile picture to the personal information div does not disappear; 3, to add an intermediate variable, in the cl_person_info () method to use this variable to judge.

This article operating environment: windows10 system, vue 2.5.2, thinkpad T480 computer.

In actual development projects, we may need to implement functions similar to secondary menus, if we want to be lazy, then we can directly use the existing Element UI framework. However, this method has a big drawback. We can modify the code to achieve the desired dynamic effect only when we understand the meaning of each code, so this method is not recommended.

Maybe some friends will say, isn't there jQuery? Yes, jQuery can also be implemented, but if you use jQuery implementation, you must directly operate on DOM, the code is more complex.

So which way should we use? Why not use v-bind? Just do it. Let's have a look.

First of all, complete the effect of the new div appearing in the mouse hover.

The partial code of html is as follows:

{{userid}} personal Settings account Center exits login / / @ mouseover, @ mouseout and vMel show = "person_con" to control the effect of suspension appearing and disappearing

Part of the js code is as follows:

Name:'', data () {return {placeholder:' search course', parameters for token:'',// to determine whether to log in, directly judge person_con:false, userid:'',}} when loading the home page, methods: {person_info () {this.person_con = true , cl_person_info () {this.person_con = false;},}

Quite simply, this realizes that when the mouse passes over the personal avatar (person_img), the personal information person_con appears below.

The following is the key, how to achieve the mouse through the personal profile picture to the div of personal information when the div of personal information does not disappear, and then carry out more business operations?

The natural idea is to add @ mouseover and @ mouseout to person_con.

Then realize that the div of personal information does not disappear when the mouse passes through the personal profile picture to the div of personal information.

The partial code of html is as follows:

/ / add @ mouseover and @ mouseout {{userid}} personal Settings account Center to log out

The partial code of js is as follows:

Name:'', data () {return {placeholder:' search course', parameters for token:'',// to determine whether to log in, directly judge person_con:false, userid:'',}} when loading the home page, methods: {person_info () {this.person_con = true }, cl_person_info () {this.person_con = false;}, person_infoContinue () {this.person_con = true;}, cl_person_infoContinue () {this.person_con = false;},}

At this point, it is not possible to achieve complete functionality, because the code is not yet perfect. Why? Because when the mouse moves out of the avatar, person_con becomes false again, which causes person_infoContinue () and cl_person_infoContinue () to be ineffective. What are we going to do? The natural idea is to add another intermediate variable, which I use to judge in the cl_person_info () method.

The partial code of js is as follows:

Name:'', data () {return {placeholder:' search course', the parameter for token:'',// to determine whether to log in or not When loading the home page, directly judge person_con:false, isperson_infoContinue:false,// add userid:'',}}, methods: {/ / unchanged person_info () {this.person_con = true }, / / add judgment cl_person_info () {if (this.isperson_infoContinue = true) {this.person_con = true;} else {this.person_con = false;}}, / / when the mouse enters the new div, let the intermediate variable be true person_infoContinue () {this.person_con = true This.isperson_infoContinue = true;}, cl_person_infoContinue () {this.isperson_infoContinue = false; this.person_con = false;},}

At this point, the function of suspended secondary menu is completed by using simple logic judgment true and false.

After reading this article, I believe you have a certain understanding of "vue.js how to achieve secondary drop-down suspension menu". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

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.