vue2.0實(shí)現(xiàn)導(dǎo)航菜單切換效果

2019-11-19 16:38:22

字體：大中小

供稿：網(wǎng)友

本文實(shí)例為大家分享了vue2.0實(shí)現(xiàn)導(dǎo)航菜單切換的具體代碼，供大家參考，具體內(nèi)容如下

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:'項(xiàng)目',id:'program'},    {text:'人員',id:'person'},    {text:'機(jī)構(gòu)',id:'organization'},    {text:'技術(shù)',id:'tech'},    {text:'地區(qū)',id:'location'},    {text:'國家',id:'country'}   ],   nowIndex:-1,   },   methods:{   relationClick:function(index){    this.nowIndex=index;   }   }  });  </script>

效果圖：