vue2.0實現(xiàn)導航菜單切換效果
更新時間：2017年05月08日 11:09:29 作者：奈奈冪
這篇文章主要為大家詳細介紹了vue2.0實現(xiàn)導航菜單切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue2.0實現(xiàn)導航菜單切換的具體代碼，供大家參考，具體內容如下
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>
效果圖：
關于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。
更多vue學習教程請閱讀專題《vue實戰(zhàn)教程》
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
Vue Element前端應用開發(fā)之整合ABP框架的前端登錄
VUE+Element 前端是一個純粹的前端處理，前面介紹了很多都是Vue+Element開發(fā)的基礎，從本章隨筆開始，就需要進入深水區(qū)了，需要結合ABP框架使用2021-05-05
在vue項目中我們經常遇到圖標,下面這篇文章主要給大家介紹了關于如何基于Vue實現(xiàn)自定義組件的方式引入圖標的相關資料,文章通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-07-07
這篇文章主要給大家介紹了關于如何優(yōu)雅的處理vue項目異常的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-06-06
Vite+Electron快速構建VUE3桌面應用的實現(xiàn)
本文主要介紹了Vite+Electron快速構建VUE3桌面應用的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
本文主要介紹了element滾動條組件el-scrollbar的使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
這篇文章主要介紹了web項目開發(fā)中會出現(xiàn)2個Token原因的解析以及實現(xiàn)的示例代碼，有需要的同學可以借鑒參考下，希望可以有所幫助2021-09-09
pinia是vue3官方的狀態(tài)管理工具,當然vue2也可以用,vue2中的狀態(tài)管理工具是vuex,vue3中不再使用vuex,推薦使用的是pinia,和vuex差不多,但比vuex更方便、更強、更好,下面這篇文章主要給大家介紹了關于Vue3之Pinia狀態(tài)管理的相關資料,需要的朋友可以參考下2022-11-11
Vue3在新版本中提供了一個新的API，稱為Suspense，它可以使異步組件的加載更加高效和流暢，在本文中，我們將詳細了解 Vue3 Suspense 處理異步組件加載的工作原理以及如何使用它來提高 Web 應用程序的性能2023-06-06
這篇文章主要介紹了vue3封裝Element導航菜單的實例代碼,分為菜單數(shù)據(jù)格式示例,控制導航收縮的詳細代碼,本文通過實例代碼介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-03-03
在用vite創(chuàng)建vue3項目時已經選擇了添加ESLint,本文就來介紹一下ESLint在項目中需要怎樣配置和使用,具有一定的參考價值,感興趣的可以了解一下2023-09-09