Vue实现导航栏切换

最新推荐文章于 2024-05-18 18:15:28 发布

NAIYAnana

最新推荐文章于 2024-05-18 18:15:28 发布

阅读量2.7k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/NAIYAnana/article/details/124741263

版权

使用Vue

@mouseenter 鼠标移入事件

@mouseout鼠标移出事件

实现导航栏鼠标移入移出效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="../public/vue.min.js"></script>
<style>
    ul li{
        width: 80px;
        background-color: red;
        color: white;
        list-style: none;
    }
    ul li:hover{
        background-color: white;
        color: red;
    }
    .d1{
        width: 400px;
        height: 400px;
        background-color: green;
        position: fixed;
        left: 126px;
        top: 16px;
        display: none;
    }
    .d2{
        display: block;
    }

</style>
<body>


    <div id="app">
        <ul>
            <li v-for="item in array" @mouseover="item.active = item.active?false:true"  @mouseout="item.active=item.active?false:true">
                {{item.titleName}}


                <div :class="{d1:true,d2:item.active}">

                    <div v-for="arr in item.names">
                        <h2>{{arr.name}}</h2>
                        <h3>{{arr.smallName}}</h3>

                    </div>

                </div>


            </li>
        </ul>


    </div>


    <script>
        new Vue({
            el:"#app",
            data:{
                array:[
                    {
                     active:false,
                    titleName: "美容美妆",
                    names: [{
                        name: "护肤",
                        smallName: ["洁面", "口红"]
                    }],

                },
                    {
                        active:false,
                        titleName: "儿童用品",
                        names: [{
                            name: "奶粉",
                            smallName: ["锦纶", "科迪"]
                        }],

                    },
                    {
                        active:false,
                        titleName: "家居",
                        names: [{
                            name: "扫把",
                            smallName: ["三星", "华为"]
                        }],

                    },
                ]
            }

        })

    </script>
</body>
</html>

NAIYAnana

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Vue实现导航栏切换

使用Vue@mouseenter 鼠标移入事件@mouseout鼠标移出事件实现导航栏鼠标移入移出效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><script src="../public/vue.min.js"></script
复制链接

扫一扫