Vue @mouseover和@mouseout实现下拉二级导航

效果展示

一、设置二级导航，添加@mouseover、@mouseout

//注意二级导航放置位置

                    <div
                                class="recommendation-title1"
                                :class="show1 == 1 ? 'redtitle' : 'commontitle'"
                                @click="turnRed1()"
                                @mouseover="dorpDown1($event)"
                                @mouseout="dorpUp1($event)"
                        >
                                蔬菜 v
                                <div class="secondnav1">
                                    <ul>
                                        <li v-for="sc in scs" :key="sc.name">
                                            <a href="">
                                                {{sc.name}}
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                        </div>  

二、添加methods

通过 display 来显示/隐藏

 methods: {
            dorpDown1(event){
                let secondnav1 = event.currentTarget.childNodes[1];
                secondnav1.style.display = "block";
                },
            dorpUp1(event){
                let secondnav1 = event.currentTarget.childNodes[1];
                secondnav1.style.display = "none";
                },
             dorpDown2(event){
                let secondnav2 = event.currentTarget.childNodes[1];
                secondnav2.style.display = "block";
                },
            dorpUp2(event){
                let secondnav2 = event.currentTarget.childNodes[1];
                secondnav2.style.display = "none";
                },
        }    

三、所有代码

<template>
        <div class="nav">
                <div class="title">
                        <div
                                class="recommendation-title1"
                                :class="show1 == 1 ? 'redtitle' : 'commontitle'"
                                @click="turnRed1()"
                                @mouseover="dorpDown1($event)"
                                @mouseout="dorpUp1($event)"
                        >
                                蔬菜 v
                                <div class="secondnav1">
                                    <ul>
                                        <li v-for="sc in scs" :key="sc.name">
                                            <a href="">
                                                {{sc.name}}
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                        </div>
                        <div
                                class="recommendation-title2"
                                :class="show2 == 1 ? 'redtitle' : 'commontitle'"
                                @click="turnRed2()"
                                @mouseover="dorpDown2($event)"
                                @mouseout="dorpUp2($event)"
                        >
                                水果 v
                                <div class="secondnav2">
                                    <ul>
                                        <li v-for="sg in sgs" :key="sg.name">
                                            <a href="">
                                                {{sg.name}}
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                        </div>
                        <div
                                class="recommendation-title3"
                                :class="show3 == 1 ? 'redtitle' : 'commontitle'"
                                @click="turnRed3()"
                                @mouseover="dorpDown3($event)"
                                @mouseout="dorpUp3($event)"
                        >
                                肉类 v
                                <div class="secondnav3">
                                    <ul>
                                        <li v-for="rl in rls" :key="rl.name">
                                            <a href="">
                                                {{rl.name}}
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                        </div>
                        <div
                                class="recommendation-title4"
                                :class="show4 == 1 ? 'redtitle' : 'commontitle'"
                                @click="turnRed4()"
                                @mouseover="dorpDown4($event)"
                                @mouseout="dorpUp4($event)"
                        >
                                熟食 v 
                                <div class="secondnav4">
                                    <ul>
                                        <li v-for="ss in sss" :key="ss.name">
                                            <a href="">
                                                {{ss.name}}
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                        </div>
                        </div>
                </div>
</template>

<script>
import App from '../App.vue';
export default {
        components: { App },
        data() {
                return {
                        show1: "1",
                        show2: "",
                        show3: "",
                        show4: "",
                        scs:[
                            {name:"土豆"},
                            {name:"白菜"},
                            {name:"豆芽"},
                            {name:"花菜"},
                        ],
                         sgs:[
                            {name:"苹果"},
                            {name:"西瓜"},
                            {name:"香蕉"},
                            {name:"草莓"},
                        ],
                         rls:[
                            {name:"排骨"},
                            {name:"鸡腿"},
                            {name:"里脊"},
                            {name:"牛舌"},
                        ],
                         sss:[
                            {name:"烧饼"},
                            {name:"包子"},
                            {name:"煎饼"},
                            {name:"烧麦"},
                        ]
                };
        },
        methods: {
            dorpDown1(event){
                let secondnav1 = event.currentTarget.childNodes[1];
                secondnav1.style.display = "block";
            },
            dorpUp1(event){
                let secondnav1 = event.currentTarget.childNodes[1];
                secondnav1.style.display = "none";
            },
             dorpDown2(event){
                let secondnav2 = event.currentTarget.childNodes[1];
                secondnav2.style.display = "block";
            },
            dorpUp2(event){
                let secondnav2 = event.currentTarget.childNodes[1];
                secondnav2.style.display = "none";
            },
             dorpDown3(event){
                let secondnav3 = event.currentTarget.childNodes[1];
                secondnav3.style.display = "block";
            },
            dorpUp3(event){
                let secondnav3 = event.currentTarget.childNodes[1];
                secondnav3.style.display = "none";
            },
             dorpDown4(event){
                let secondnav4 = event.currentTarget.childNodes[1];
                secondnav4.style.display = "block";
            },
            dorpUp4(event){
                let secondnav4 = event.currentTarget.childNodes[1];
                secondnav4.style.display = "none";
            },
                turnRed1: function () {
                        this.show1 = 1;
                        this.show2 = 0;
                        this.show3 = 0;
                        this.show4 = 0;
                },
                turnRed2: function () {
                        this.show2 = 1;
                        this.show1 = 0;
                        this.show3 = 0;
                        this.show4 = 0;
                },
                turnRed3: function () {
                        this.show3 = 1;
                        this.show1 = 0;
                        this.show2 = 0;
                        this.show4 = 0;
                },
                turnRed4: function () {
                        this.show4 = 1;
                        this.show1 = 0;
                        this.show2 = 0;
                        this.show3 = 0;
                },
        },
};
</script>

<style lang="less" scoped>
.secondnav1 a,.secondnav2 a,.secondnav3 a,.secondnav4 a{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    height: 25px;
}
.secondnav1 a:hover,.secondnav2 a:hover,.secondnav3 a:hover,.secondnav4 a:hover{
    color: red;
    text-decoration: underline;
}
.secondnav1,.secondnav2,.secondnav3,.secondnav4{
    display: none;
    border-radius: 3px;
    left: 30px;
    top: 40px;
    width: 70px;
    height: 100px;
    background-color: rgb(247, 216, 216);
    position: absolute;
    }
.commontitle {
        color: black;
        cursor: pointer;
        font-size: 20px;
        width: 125px;
        height: 37px;
        line-height: 40px;
}
.redtitle {
        color: #de2013;
        border-bottom: 3px solid#de2013;
}
.recommendation-title1:hover,
.recommendation-title2:hover,
.recommendation-title3:hover,
.recommendation-title4:hover {
        color: #de2013;
        border-bottom: 3px solid#de2013;
}
.recommendation-title1,
.recommendation-title2,
.recommendation-title3,
.recommendation-title4 {
        cursor: pointer;
        position: relative;
        font-size: 20px;
        width: 125px;
        height: 37px;
        line-height: 40px;
}
.title {
        display: flex;
        background-color: rgb(223, 223, 223);
        width: 500px;
        height: 40px;
}
.nav {
        border: 1px solid rgb(180, 179, 179);
        width: 500px;
        height: 200px;
}
a {
        color: black;
        text-decoration: none;
}
li {
        list-style-type: none;
}
ul {
        list-style: none; /*清除列表默认样式*/
        padding: 0; /*清除padding*/
        margin: 0;
}
</style>