vue2.0实现导航菜单切换效果

2019-11-19 16:38:22

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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>

<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>

效果图：