Vue中采用v-for循环完成一个下拉式列表标签

需求：下拉式导航标签

在最近对vue的练手过程中，遇到一个小问题，历经多时终于找到比较粗糙的解决办法，记录一下方便日后复盘。

首先配置一个template框架，

<template>
    <div class="nav">
        <ul class="navmenu">
            <li>首页</li>
            <li>首页</li>
　　　　　　　<li>首页</li>
　　　　　　　<li>首页</li>

        </ul>    
    </div>

</template>

 想增加导航栏复用性，在此将导航内容打包为对象并用data存储的方式，数据结构如下：

data() {
　　return {
　　　　navTopObj:[
　　　　　　{id:'2','title':'信息公开',subNavObj:['简介','致辞','机构领导','组织机构','部门简介','工作理念','预决算公开']},
　　　　　　{id:'3','title':'新闻中心',subNavObj:['简介','致辞','机构领导','组织机构','部门简介','工作理念','预决算公开']},
　　　　　　{id:'4','title':'资质能力',subNavObj:['简介','致辞','机构领导','组织机构','部门简介','工作理念','预决算公开']},
　　　　　　{id:'5','title':'计量服务',subNavObj:['简介','致辞','机构领导','组织机构','部门简介','工作理念','预决算公开']},
　　　　　　{id:'6','title':'普法园地',subNavObj:['简介','致辞','机构领导','组织机构','部门简介','工作理念','预决算公开']},
　　　　　　{id:'7','title':'在线交流',subNavObj:['简介','致辞','机构领导','组织机构','部门简介','工作理念','预决算公开']},
       ],

 然后通过v-for将所需内容呈现出来

<li v-for="p in navTopObj" :key="p.id" >{{p.title}}
　　<div class='subNav' v-show="n===p.id">
　　　　<ul>
　　　　　　<li ><a v-for="(char, index) of p.subNavObj" :key="index" >{{char}}</a></li>
　　　　</ul>
　　</div>
</li>

 　　接下来就是css布局了，开始尝试使用内联样式display：none实现，但是鼠标移上没有反应，会出现过滤器冲突等问题。

为了实现动态切换搜索了大量资料说可以使用：class切换样式，可能使用方法不对鼠标移上没有预期效果。

然后又尝试了@mouseover鼠标事件，通过：class默认设置一个样式，将特征值放在data中使用mouseover函数去修改，但是methods的函数对data的数据进行修改也没能达到预期效果。

　　最后在曾经的笔记中找到了v-show函数，想到将v-show和mouseover联合起来，实现如下：

<template>
    <div class="nav">
        <ul class="navmenu">
            <li>首页</li>
            <li v-for="p in navTopObj" :key="p.id" @mouseover="mouseOver" @mouseleave="mouseLeave">{{p.title}}
                    <div class='subNav' v-show="n">
                        <ul>
                            <li ><a v-for="(char, index) of p.subNavObj" :key="index" >{{char}}</a></li>
                        </ul>
                    </div>
            </li>
        </ul>    
    </div>

</template>

<script>
export default {
    name:'navTop',
    data() {
       return {
            navTopObj:[

                {id:'2','title':'信息公开',subNavObj:['简介','致辞','机构领导','组织机构','部门简介','工作理念','预决算公开']},
                {id:'3','title':'新闻中心',subNavObj:['简介','致辞','机构领导','组织机构','部门简介','工作理念','预决算公开']},
                {id:'4','title':'资质能力',subNavObj:['简介','致辞','机构领导','组织机构','部门简介','工作理念','预决算公开']},
                {id:'5','title':'计量服务',subNavObj:['简介','致辞','机构领导','组织机构','部门简介','工作理念','预决算公开']},
                {id:'6','title':'普法园地',subNavObj:['简介','致辞','机构领导','组织机构','部门简介','工作理念','预决算公开']},
                {id:'7','title':'在线交流',subNavObj:['简介','致辞','机构领导','组织机构','部门简介','工作理念','预决算公开']},
            ],
            n:0
      }
   },
   methods:{
        mouseOver(k){
            this.n=1
        },
        mouseLeave(k){
            this.n=0
        },
   },
}

 然后出现了一个问题，当触发mouseover事件时所有的下拉框都展示出来，我觉着或许需要给每个遍历出来的标签打上特征标签。

而id正是为区分而设置的，于是尝试了一下将id顺着mouseover函数传入：

<template>
    <div class="nav">
        <ul class="navmenu">
            <li>首页</li>
            <li v-for="p in navTopObj" :key="p.id" @mouseover="mouseOver(p.id)" @mouseleave="mouseLeave(p.id)">{{p.title}}
                    <div class='subNav' v-show="n===p.id">
                        <ul>
                            <li ><a v-for="(char, index) of p.subNavObj" :key="index" >{{char}}</a></li>
                        </ul>
                    </div>
            </li>
        </ul>    
    </div>
</template>

<script>
export default {
    name:'navTop',
    data() {
       return {
            navTopObj:[

                {id:'2','title':'信息公开',subNavObj:['简介','致辞','机构领导','组织机构','部门简介','工作理念','预决算公开']},
                {id:'3','title':'新闻中心',subNavObj:['简介','致辞','机构领导','组织机构','部门简介','工作理念','预决算公开']},
                {id:'4','title':'资质能力',subNavObj:['简介','致辞','机构领导','组织机构','部门简介','工作理念','预决算公开']},
                {id:'5','title':'计量服务',subNavObj:['简介','致辞','机构领导','组织机构','部门简介','工作理念','预决算公开']},
                {id:'6','title':'普法园地',subNavObj:['简介','致辞','机构领导','组织机构','部门简介','工作理念','预决算公开']},
                {id:'7','title':'在线交流',subNavObj:['简介','致辞','机构领导','组织机构','部门简介','工作理念','预决算公开']},
            ],
            n:0
      }
   },
   methods:{
        mouseOver(k){
            this.n=k
        },
        mouseLeave(k){
            this.n=0
        },
   },
}

 哎嘿，功能成功实现，为给以后像我一样遇到此类问题的小伙伴一个小方向特做此记录~