当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue2.0实现导航菜单切换效果

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

2018年04月30日  | 移动技术网IT编程  | 我要评论

帅哥图,51图片,色女窝

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

效果图：

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网