Vue實現(xiàn)點擊導航欄當前標簽后變色功能
更新時間：2020年08月19日 17:04:55 作者：王佳斌
這篇文章主要為大家詳細介紹了Vue實現(xiàn)點擊導航欄當前標簽后變色功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue實現(xiàn)點擊導航欄當前標簽后變色的具體代碼，供大家參考，具體內(nèi)容如下
效果圖
實現(xiàn)
這個功能，借助一個切換標識，當與各標簽項 index 對應時切換 css。
HTML：
<template>
<div class="nav">
<!-- 點擊切換變色導航欄 -->
<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,//切換標識
nav: [//導航欄數(shù)據(jù)
'首頁',
'新聞中心',
'要聞資訊',
'聯(lián)系我們'
]
}
},
methods: {
// 導航欄切換
go(index) {
this.current = index//激活樣式
}
}
}
</script>
CSS：
<style>
/*點擊切換變色導航欄*/
ul li {
list-style: none;
float: left;
margin-right: 20px;
padding:10px;
}
.active{/*激活樣式*/
color: red;
}
</style>
關于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。
更多vue學習教程請閱讀專題《vue實戰(zhàn)教程》
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本文主要介紹了vue父組件調(diào)用子組件的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
在本篇文章里小編給大家整理的是關于vue按需加載實例的相關知識點內(nèi)容，有需要的朋友們可以學習參考下。2019-09-09
這篇文章主要介紹了vue中數(shù)據(jù)請求axios的封裝和使用，Axios?是一個基于?promise?的?HTTP?庫，下面文章圍繞主題的相關資料展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-04-04
一文詳細了解Vue?3.0中的onMounted和onUnmounted鉤子函數(shù)
Vue3.0引入了新的組件生命周期鉤子函數(shù)onMounted和onUnmounted,分別用于組件掛載后和卸載前的操作,這些鉤子函數(shù)為開發(fā)者提供了更多靈活性,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-10-10
在日常使用Vue開發(fā)項目的時候，計算屬性computed是一個非常常用的特性，本文就來分享一些使用Vue的computed計算屬性時的一些小技巧，希望能夠幫助到大家2023-06-06
C#實現(xiàn)將一個字符轉(zhuǎn)換為整數(shù)
下面小編就為大家分享一篇C#實現(xiàn)將一個字符轉(zhuǎn)換為整數(shù)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了Vue 樣式切換及三元判斷樣式關聯(lián)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)發(fā)表評論功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
下面小編就為大家分享一篇Vue cli 引入第三方JS和CSS的常用方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
在項目中經(jīng)常會遇到圖片上傳功能，今天腳本之家小編給大家?guī)砹耸褂肰ue實現(xiàn)圖片上傳的三種方式，感興趣的朋友一起看看吧2018-07-07