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

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

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

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

效果圖

實(shí)現(xiàn)

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

HTML：

<template>
 <div class="nav">

 <!-- 點(diǎn)擊切換變色導(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)識(shí)
 nav: [//導(dǎo)航欄數(shù)據(jù)
 '首頁(yè)',
 '新聞中心',
 '要聞資訊',
 '聯(lián)系我們'
 ]
 }
 },

 methods: {

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

 }
}

</script>

CSS：

<style>

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

關(guān)于vue父組件調(diào)用子組件的方法
本文主要介紹了vue父組件調(diào)用子組件的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-04-04
vue按需加載實(shí)例詳解
在本篇文章里小編給大家整理的是關(guān)于vue按需加載實(shí)例的相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們可以學(xué)習(xí)參考下。
2019-09-09
vue中數(shù)據(jù)請(qǐng)求axios的封裝和使用
這篇文章主要介紹了vue中數(shù)據(jù)請(qǐng)求axios的封裝和使用，Axios?是一個(gè)基于?promise?的?HTTP?庫(kù)，下面文章圍繞主題的相關(guān)資料展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-04-04
一文詳細(xì)了解Vue?3.0中的onMounted和onUnmounted鉤子函數(shù)
Vue3.0引入了新的組件生命周期鉤子函數(shù)onMounted和onUnmounted,分別用于組件掛載后和卸載前的操作,這些鉤子函數(shù)為開(kāi)發(fā)者提供了更多靈活性,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-10-10
淺析Vue如何巧用computed計(jì)算屬性
在日常使用Vue開(kāi)發(fā)項(xiàng)目的時(shí)候，計(jì)算屬性computed是一個(gè)非常常用的特性，本文就來(lái)分享一些使用Vue的computed計(jì)算屬性時(shí)的一些小技巧，希望能夠幫助到大家
2023-06-06
C#實(shí)現(xiàn)將一個(gè)字符轉(zhuǎn)換為整數(shù)
下面小編就為大家分享一篇C#實(shí)現(xiàn)將一個(gè)字符轉(zhuǎn)換為整數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12
Vue 樣式切換及三元判斷樣式關(guān)聯(lián)操作
這篇文章主要介紹了Vue 樣式切換及三元判斷樣式關(guān)聯(lián)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
vue實(shí)現(xiàn)發(fā)表評(píng)論功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)發(fā)表評(píng)論功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue cli 引入第三方JS和CSS的常用方法分享
下面小編就為大家分享一篇Vue cli 引入第三方JS和CSS的常用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
使用Vue實(shí)現(xiàn)圖片上傳的三種方式
在項(xiàng)目中經(jīng)常會(huì)遇到圖片上傳功能，今天腳本之家小編給大家?guī)?lái)了使用Vue實(shí)現(xiàn)圖片上傳的三種方式，感興趣的朋友一起看看吧
2018-07-07