本文实例为大家分享了vue2.0实现导航菜单切换的具体代码，供大家参考，具体内容如下

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

<div id="nav"> <ul> <li v-for="(relation,index) in relations" v-bind:id="relation.id" v-bind:id="relation.id" v-bind:class="{checked:index==nowIndex}" v-on:click="relationClick(index)"> <i></i> <span class="">{{relation.text}}</span> </li> </ul> </div>

js

<script src="js/vue.js" charset="utf-8"></script> <script type="text/javascript"> 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; } } }); </script>

效果图：

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。