vue2.0如何实现导航菜单切换效果
这篇文章将为大家详细讲解有关vue2.0如何实现导航菜单切换效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
成都创新互联公司主要从事网站设计、网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务白碱滩,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220
具体内容如下
css
*{
margin:0;
padding: 0;
}
ul li{
list-style: none;
}
.navul{
margin:100px auto 20px;
overflow: hidden;
}
.navul li{
background-color: #5597b4;
padding:18px 30px;
float:left;
color: #fff;
font-size: 18px;
cursor: pointer;
}
.active{
background-color: #5597b4;
}
.home .home,.new .new,.contact .contact,.service .service{
background-color: skyblue;
}
.checked{
background: #eff4f7;
}html
js
var nav = new Vue({
el:'#nav',
data:{
relations: [
{text:'项目',id:'program'},
{text:'人员',id:'person'},
{text:'机构',id:'organization'},
{text:'技术',id:'tech'},
{text:'地区',id:'location'},
{text:'国家',id:'country'}
],
nowIndex:-1,
},
methods:{
relationClick:function(index){
this.nowIndex=index;
}
}
});
效果图：
关于“vue2.0如何实现导航菜单切换效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
当前标题：vue2.0如何实现导航菜单切换效果
当前网址：
http://cdkjz.cn/article/gpjdse.html
