脚本宝典收集整理的这篇文章主要介绍了vue导航条+下拉菜单，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

• 直接上效果。。。。

• 刚学vue，所以代码写的比较乱，欢迎朋友指教。

• 具体看代码

<template>
    <div class="wrapper" >
         <div class="nav-item" :class='{active: index == nowIndex}' v-for='(tabItem,index) in tabParams' @click='tabToggle(index)'>
             <span :class='{dropdownBtn: index == 0}'  @click='dropdown'>{{tabItem}}</span>
             <ul v-if='index == 0' class="dropdownWrapper" v-show='dropdownActive'>
                <li v-for='(item, index) in dropParams'>{{item}}</li>
            </ul>
         </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                nowIndex: 0,
                dropdownActive: false,
                tabParams: ['政治', '娱乐', '体育', '搞笑'],
                dropParams: ['亚洲', '北美洲', '欧洲', '非洲']
            }
        },
        methods: {
            dropdown: function(){
                console.log(event.target.getAttribute('class'))
                if(event.target.getAttribute('class') === 'dropdownBtn') {
                    this.dropdownActive = !this.dropdownActive;
                }
            },
            tabToggle: function(index){
                this.nowIndex = index;
                if(index === 0){
                    return
                }else {
                    this.dropdownActive = false;
                }
            }
        },
    }
</script>

<style scoped>
    @import './reset.css';
    body {
        min-height: 100%;
    }
    .wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .wrapper>div {
        flex: 1;
        text-align: center;
        height: 36px;
        line-height: 36px;
    }
    .dropdownWrapper {
        /*margin-top: 36px;*/
        border: 1px solid #2C3E50;
        font-size: 14px;
    }
    .dropdownWrapper li {
        display: block;
    }

    .nav-item.active {
        background: #e3e3d3;
    }
    .dropdownBtn {
        display: inline-block;
        width: 100%;
        height: 100%;
    }
    .nav-item {
        cursor: pointer;
    }
</style>

脚本宝典总结

以上是脚本宝典为你收集整理的vue导航条+下拉菜单全部内容，希望文章能够帮你解决vue导航条+下拉菜单所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。