Vue.js home PC-side horizontal navigation bar

First look at the effect

<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: ' Home ',
Issubshow:false,
subitems:[
]
},
{
Name: ' Select Route ',
Issubshow:false,
subitems:[
{
Name: ' Maldives '
},
{
Name: ' Somalia Strait '
},
{
Name: ' Lijiang/Kunming '
},
{
Name: ' Tiananmen Square/Forbidden City '
}
]
}
,
{
Name: ' About Us ',
Issubshow:false,
subitems:[
{
Name: ' Company Profile '
},
{
Name: ' Future Planning '
},
{
Name: ' Enterprise News '
}
]
},
{
Name: ' Travel guide ',
Issubshow:false,
subitems:[
{
Name: ' Popular Raiders '
},
{
Name: ' Economic strategy '
},
{
Name: ' Youth Raiders '
},
{
Name: ' Old age Raiders '
},
{
Name: ' Foodie must see '
}
]
},
{
Name: ' Custom Travel ',
Issubshow:false,
subitems:[
{
Name: ' Normal Custom '
},
{
Name: ' Deluxe line '
},
{
Name: ' A Must for lovers '
}
]
}

]
}
},
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>

Just started to learn, write bad please God don't spray me.

Vue.js home PC-side horizontal navigation bar