先看看效果
<template>
<div>
<div ?class="nav">
<ul class="nav-centent">
<li v-for="(item , index) in items" @mouseover="selectStyle (item)" @mouseout="outStyle(item)">
<a :href="item.href" :class="item.id">{{item.name}}</a>
<ul v-show="item.isSubShow">
<li v-for="subItems in item.subItems">
<a href="#">{{subItems.name}}</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</template>
<script type="text/javascript">
export default{
data(){
return{
nowIndex:0,
items:[
{
name:‘首页‘,
isSubShow:false,
subItems:[
]
},
{
name:‘精选路线‘,
isSubShow:false,
subItems:[
{
name:‘马尔代夫‘
},
{
name:‘索马里海峡‘
},
{
name:‘丽江/昆明‘
},
{
name:‘天安门/故宫‘
}
]
}
,
{
name:‘关于我们‘,
isSubShow:false,
subItems:[
{
name:‘企业简介‘
},
{
name:‘未来规划‘
},
{
name:‘企业动态‘
}
]
},
{
name:‘旅游攻略‘,
isSubShow:false,
subItems:[
{
name:‘热门攻略‘
},
{
name:‘经济攻略‘
},
{
name:‘青年攻略‘
},
{
name:‘老年攻略‘
},
{
name:‘吃货必看‘
}
]
},
{
name:‘定制旅游‘,
isSubShow:false,
subItems:[
{
name:‘普通定制‘
},
{
name:‘豪华专线‘
},
{
name:‘情侣必备‘
}
]
}
]
}
},
methods:{
selectStyle:function(item){
item.isSubShow = true
},
outStyle(item){
item.isSubShow = false
}
}
}
</script>
<style type="text/css" scoped>
.nav{width:100%;height: 50px;background: #48B246;}
.nav .nav-centent{width: 1200px;margin:0 auto;height: 50px;}
.nav .nav-centent > li{width: 120px;height: 50px;display: block;float: left;text-align: center;margin-right: 20px;position: relative;cursor: pointer;}
.nav .nav-centent li a{width: 120px;height: 50px;display: block;font-size: 18px;line-height: 50px;color: #fff;}
.nav .nav-centent ul{position: absolute;left: 0;top: 50px;z-index: 99;width: 100%;}
.nav .nav-centent ul li{width: 120px;height: 50px;display: block;float: left;text-align: center;margin-right: 20px;line-height: 50px;background: #46B148;}
.nav .nav-centent ul li a:hover{background: #fff;color:#48B246; }
.nav .nav-centent li a:hover{background: #fff;color:#48B246; }
.nav .nav-centent li a.on{background: #fff;color:#48B246; }
</style>
刚开始学，写的不好请大神不要喷我。
vue.js ??首页PC端横排导航栏
原文地址：https://www.cnblogs.com/websundasheng/p/9506088.html