Vue實現(xiàn)點擊導(dǎo)航欄當(dāng)前標(biāo)簽后變色功能

更新時間：2020年08月19日 17:04:55 作者：王佳斌

這篇文章主要為大家詳細介紹了Vue實現(xiàn)點擊導(dǎo)航欄當(dāng)前標(biāo)簽后變色功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue實現(xiàn)點擊導(dǎo)航欄當(dāng)前標(biāo)簽后變色的具體代碼，供大家參考，具體內(nèi)容如下

效果圖

實現(xiàn)

這個功能，借助一個切換標(biāo)識，當(dāng)與各標(biāo)簽項 index 對應(yīng)時切換 css。

HTML：

<template>
 <div class="nav">

 <!-- 點擊切換變色導(dǎo)航欄 -->
 <ul>
 <li 
 v-for="(item,index) in nav"
 :class="{ active: index == current }"
 @click="go(index)">
 {{ item }}
 </li>
 </ul>
 <!-- END -->

 </div>
</template>

JavaScript：

<script>

export default {

 data(){
 return {
 current: 0,//切換標(biāo)識
 nav: [//導(dǎo)航欄數(shù)據(jù)
 '首頁',
 '新聞中心',
 '要聞資訊',
 '聯(lián)系我們'
 ]
 }
 },

 methods: {

 // 導(dǎo)航欄切換
 go(index) {
 this.current = index//激活樣式
 }

 }
}

</script>

CSS：

<style>

 /*點擊切換變色導(dǎo)航欄*/
 ul li {
 list-style: none;
 float: left;
 margin-right: 20px;
 padding:10px;
 }
 .active{/*激活樣式*/
 color: red;
 }
 
</style>

關(guān)于vue.js組件的教程，請大家點擊專題vue.js組件學(xué)習(xí)教程進行學(xué)習(xí)。

更多vue學(xué)習(xí)教程請閱讀專題《vue實戰(zhàn)教程》

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue3項目中引入html頁面的方法舉例
這篇文章主要給大家介紹了關(guān)于Vue3項目中引入html頁面的相關(guān)資料,Vue3是一個JavaScript框架,通常我們使用它來構(gòu)建單頁應(yīng)用程序(SPA),如果你想在HTML頁面中使用Vue3,可以參考這篇文章,需要的朋友可以參考下
2023-09-09
vue實現(xiàn)導(dǎo)航菜單和編輯文本的示例代碼
這篇文章主要介紹了vue實現(xiàn)導(dǎo)航菜單和編輯文本功能的方法，文中示例代碼非常詳細，幫助大家更好的參考和學(xué)習(xí)，感興趣的朋友可以了解下
2020-07-07
vue中jsonp的使用方法
這篇文章主要介紹了vue中jsonp的使用方法,文章從安裝開始展開具體的vue中jsonp的使用詳細內(nèi)容,需要的朋友可以參考一下，希望對大家有所幫助
2021-11-11
vue如何解決axios請求前端跨域問題
vue項目中,前端使用axios與后臺進行數(shù)據(jù)請求或者提交的時候,如果后臺沒有設(shè)置跨域,瀏覽器做數(shù)據(jù)請求的時候就會報錯,這篇文章主要給大家介紹了關(guān)于vue如何解決axios請求前端跨域問題的相關(guān)資料,需要的朋友可以參考下
2021-10-10
Vue中如何使用mock模擬數(shù)據(jù)
這篇文章主要介紹了Vue中如何使用mock模擬數(shù)據(jù)，具有很好的價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
關(guān)于Vue?"__ob__:Observer"屬性的解決方案詳析
在操作數(shù)據(jù)的時候發(fā)現(xiàn),__ob__: Observer這個屬性出現(xiàn)之后,如果單獨拿數(shù)據(jù)的值,就會返回undefined,下面這篇文章主要給大家介紹了關(guān)于Vue?"__ob__:Observer"屬性的解決方案,需要的朋友可以參考下
2022-11-11
Vue + Webpack + Vue-loader學(xué)習(xí)教程之功能介紹篇
這篇文章主要介紹了關(guān)于Vue + Webpack + Vue-loader功能介紹的相關(guān)資料，文中介紹的非常詳細，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。
2017-03-03
淺談vue項目4rs vue-router上線后history模式遇到的坑
今天小編就為大家分享一篇淺談vue項目4rs vue-router上線后history模式遇到的坑，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue使用視頻作為網(wǎng)頁背景的實現(xiàn)指南
在現(xiàn)代網(wǎng)頁設(shè)計中,視頻背景逐漸成為一種流行的設(shè)計趨勢,它不僅能夠提升網(wǎng)頁的動態(tài)效果,還可以在視覺上抓住用戶的注意力,本文將詳細講解如何在頁面中使用視頻作為背景,并確保內(nèi)容可見、頁面元素布局合理,需要的朋友可以參考下
2024-10-10
詳解Vue結(jié)合后臺的列表增刪改案例
這篇文章主要介紹了詳解Vue結(jié)合后臺的增刪改案例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08