vue中的横向排列_vue.js 首页PC端横排导航栏

先看看效果

• {{item.name}}

  • {{subItems.name}}

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

}

}

}

.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; }

刚开始学，写的不好请大神不要喷我。