Vue.js 實(shí)現(xiàn)tab切換并變色操作講解
更新時(shí)間：2021年09月14日 15:00:42 作者：Q_xyue
這篇文章主要介紹了Vue.js 實(shí)現(xiàn)tab切換并變色操作講解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
在實(shí)現(xiàn)這個(gè)功能時(shí)借鑒的原博主的方法沒(méi)有實(shí)現(xiàn)切換變色，琢磨了好久終于知道了怎么切換變色（小菜鳥(niǎo)的咆哮）?。?！記錄下來(lái)以供參考，以下是vue的完整tab頁(yè)切換并變色的代碼框架。
<template>
<div >
//tab頁(yè)切換按鈕部分
<ul >
<li v-for="(item,index) in navList" :class = "{active:!(index-
menuIndex)}" @click = 'menuShow(index)'>
<a href="#" rel="external nofollow" >{{item}}</a>
</li>
</ul>
//內(nèi)容主體部分
<div v-show = 'menuIndex == 0'>內(nèi)容一 <!--此處可以換成子組件--></div>
<div v-show = 'menuIndex == 1'>內(nèi)容二 <!--此處可以換成子組件--></div>
</div>
</template>
<script type="text/javascript">
export default {
data(){
return {
menuIndex:0,
navList:['中間件詳情','部署架構(gòu)'],
}
}
methods: {
menuShow (index) {
this.menuIndex = index
console.log(this.menuIndex)
}
}
</script>
//樣式
<style scoped>
//點(diǎn)擊切換顏色，我設(shè)置的為藍(lán)色
.active{
background-color: rgba(13, 175, 255, 0.33);
}
<style>
切換顏色就是這個(gè)
.active{
//背景色
background-color: rgba(13, 175, 255, 0.33);
//字體色
color：red；
}
以下是效果圖：
點(diǎn)擊中間件詳情：
效果圖：
點(diǎn)擊部署架構(gòu)：
到此這篇關(guān)于Vue.js 實(shí)現(xiàn)tab切換并變色操作講解的文章就介紹到這了,更多相關(guān)Vue.js 實(shí)現(xiàn)tab切換并變色內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue如何在引入的el-tree前添加圖標(biāo)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue中用props給data賦初始值遇到的問(wèn)題解決
這篇文章主要介紹了Vue中用props給data賦初始值遇到的問(wèn)題解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
詳解vue項(xiàng)目中實(shí)現(xiàn)圖片裁剪功能
這篇文章主要介紹了vue項(xiàng)目中實(shí)現(xiàn)圖片裁剪功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
本篇文章主要介紹了詳解Vue生命周期的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
Vue-pdf實(shí)現(xiàn)在線預(yù)覽PDF文件
這篇文章主要為大家詳細(xì)介紹了Vue-pdf實(shí)現(xiàn)在線預(yù)覽PDF文件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了vue組件之間的通信，幫助大家更好的理解和學(xué)習(xí)前端的相關(guān)知識(shí)，感興趣的朋友可以了解下2020-08-08
這篇文章主要介紹了深入了解Vue3模板編譯原理，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了vue2中如何自定義組件的v-model，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Django+Vue.js實(shí)現(xiàn)搜索功能
本文主要介紹了Django+Vue.js實(shí)現(xiàn)搜索功能,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06
vue學(xué)習(xí)筆記之Vue中css動(dòng)畫(huà)原理簡(jiǎn)單示例
這篇文章主要介紹了vue學(xué)習(xí)筆記之Vue中css動(dòng)畫(huà)原理,結(jié)合簡(jiǎn)單實(shí)例形式分析了Vue中css樣式變換動(dòng)畫(huà)效果實(shí)現(xiàn)原理與相關(guān)操作技巧,需要的朋友可以參考下2020-02-02