vue2.0如何實現導航菜單切換效果

這篇文章將為大家詳細講解有關vue2.0如何實現導航菜單切換效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯公司主要從事網站設計、網站建設、網頁設計、企業(yè)做網站、公司建網站等業(yè)務。立足成都服務白堿灘,10余年網站建設經驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務: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

<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:'地區(qū)',id:'location'}, 
  {text:'國家',id:'country'} 
 ], 
 nowIndex:-1, 
 }, 
 methods:{ 
 relationClick:function(index){ 
  this.nowIndex=index; 
 } 
 } 
 }); 
 </script>

效果圖：

關于“vue2.0如何實現導航菜單切換效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

本文標題：vue2.0如何實現導航菜單切換效果
URL分享：http://muchs.cn/article34/gpjdse.html

成都網站建設公司_創(chuàng)新互聯，為您提供微信小程序、建站公司、云服務器、網站策劃、做網站、Google

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯