Vue实现导航栏切换

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

NAIYAnana

2761人浏览 · 2022-05-12 22:09:50

NAIYAnana · 2022-05-12 22:09:50 发布

使用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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^