实现如图所示的菜单效果

最新推荐文章于 2024-10-08 13:51:35 发布

不想写，还得写，写就写，慢慢写

最新推荐文章于 2024-10-08 13:51:35 发布

阅读量103

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_74331185/article/details/128447559

版权

<style>
    body{
        width: 600px;
    }
    a{
        text-decoration: none; /* 去掉下划线 */
        display: block;
        color: #fff; /* 字体颜色 */
        width: 120px;
        height: 40px;
        line-height: 40px;
        border: 1px solid #fff;
        border-width: 1px 1px 0 0;
        background: #255f9e;
    }
    li{
        list-style-type: none;
    }
    #app > li{
        float: left;
        text-align: center;
        position: relative;
    }
    #app li a:hover{
        color: #fff;
        background: #ffb100;
    }
    #app li ul{
        position: absolute;
        left: -40px;
        top: 40px;
        margin-top: 1px;
        font-size: 12px;
    }
</style>
<body>
    <div id="app">
        <li v-for="menu in menus" @mouseover="menu.show = !menu.show" @mouseout="menu.show = !menu.show">
            <a :href="menu.url">{{ menu.name }}</a>
            <ul v-show="menu.show">
                <li v-for="sub in menu.subMenus">
                    <a :href="sub.url">{{ sub.name }}</a>
                </li>
            </ul>
        </li>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data: {
                menus: [
                    {
                        name:'我的淘宝', //主菜单的名称
                        url: '#', //主菜单对应的地址
                        show: false, //是否显示子菜单
                        subMenus: [ //子菜单的列表
                            {
                                name: '已买到的宝贝',
                                url: '#'
                            },
                            {
                                name: '已卖出的宝贝',
                                url: '#'
                            }
                        ]
                    },
                    {
                        name: '收藏夹',
                        url: '#',
                        show: false,
                        subMenus:[
                            {
                                name: '收藏的宝贝',
                                url: '#'
                            },
                            {
                                name: '收藏的店铺',
                                url: '#'
                            }
                        ]
                    }
                ]
            }
        })
    </script>

音乐播放器

<style>
    .active{
        background: red;
    }
</style>
<body>
    <div id="app">
        <audio :src="songs[currentIndex].songUrl" controls autoplay></audio>
        <ul>
            <li v-for="song in songs" @click="play(song.id)" :class="{active: song.id === currentIndex+1}">
                <h2>歌名：{{ song.name }}</h2>
                <p>歌手：{{ song.artist }}</p>
            </li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                songs:[
                    {
                        id: 1,
                        name: '别知己', //音乐名
                        songUrl: './audio/别知己.mp3', //音乐地址
                        artist:'潇斌' //歌手
                    },
                    {
                        id: 2,
                        name: '西海情歌',
                        songUrl: './audio/西海情歌.mp3',
                        artist:'刀郎'
                    },
                    {
                        id:3,
                        name: '粉丝记事本',
                        songUrl: './audio/粉丝记事本.mp3',
                        artist: '徐誉滕'
                    }
                ],
                currentIndex: 0  //当前用户选择的音乐的下标
            },
            methods: {
                play(id){
                    this.currentIndex = id - 1
                }
            }
        })
    </script>
</body>