欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue.js 實現(xiàn)tab切換并變色操作講解

 更新時間:2021年09月14日 15:00:42   作者:Q_xyue  
這篇文章主要介紹了Vue.js 實現(xiàn)tab切換并變色操作講解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下

在實現(xiàn)這個功能時借鑒的原博主的方法沒有實現(xiàn)切換變色,琢磨了好久終于知道了怎么切換變色(小菜鳥的咆哮)?。?!記錄下來以供參考,以下是vue的完整tab頁切換并變色的代碼框架。

​<template>
<div >
     //tab頁切換按鈕部分
      <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:['中間件詳情','部署架構'],
      }
            }
   methods: {
      menuShow (index) {
        this.menuIndex = index
        console.log(this.menuIndex)
      }
}
</script>
//樣式
<style scoped>
//點擊切換顏色,我設置的為藍色
  .active{
    background-color: rgba(13, 175, 255, 0.33);
    }
<style>

切換顏色就是這個

.active{
//背景色
  background-color: rgba(13, 175, 255, 0.33);
//字體色
color:red;
  }

以下是效果圖:

點擊中間件詳情:

效果圖:

點擊部署架構:

到此這篇關于Vue.js 實現(xiàn)tab切換并變色操作講解的文章就介紹到這了,更多相關Vue.js 實現(xiàn)tab切換并變色內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • vue如何在引入的el-tree前添加圖標

    vue如何在引入的el-tree前添加圖標

    這篇文章主要介紹了vue如何在引入的el-tree前添加圖標問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • Vue中用props給data賦初始值遇到的問題解決

    Vue中用props給data賦初始值遇到的問題解決

    這篇文章主要介紹了Vue中用props給data賦初始值遇到的問題解決,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • 詳解vue項目中實現(xiàn)圖片裁剪功能

    詳解vue項目中實現(xiàn)圖片裁剪功能

    這篇文章主要介紹了vue項目中實現(xiàn)圖片裁剪功能,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-06-06
  • 詳解Vue生命周期的示例

    詳解Vue生命周期的示例

    本篇文章主要介紹了詳解Vue生命周期的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-03-03
  • Vue-pdf實現(xiàn)在線預覽PDF文件

    Vue-pdf實現(xiàn)在線預覽PDF文件

    這篇文章主要為大家詳細介紹了Vue-pdf實現(xiàn)在線預覽PDF文件,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-05-05
  • 詳解vue組件之間的通信

    詳解vue組件之間的通信

    這篇文章主要介紹了vue組件之間的通信,幫助大家更好的理解和學習前端的相關知識,感興趣的朋友可以了解下
    2020-08-08
  • 深入了解Vue3模板編譯原理

    深入了解Vue3模板編譯原理

    這篇文章主要介紹了深入了解Vue3模板編譯原理,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-11-11
  • vue2中如何自定義組件的v-model

    vue2中如何自定義組件的v-model

    這篇文章主要介紹了vue2中如何自定義組件的v-model,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • Django+Vue.js實現(xiàn)搜索功能

    Django+Vue.js實現(xiàn)搜索功能

    本文主要介紹了Django+Vue.js實現(xiàn)搜索功能,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2024-06-06
  • vue學習筆記之Vue中css動畫原理簡單示例

    vue學習筆記之Vue中css動畫原理簡單示例

    這篇文章主要介紹了vue學習筆記之Vue中css動畫原理,結合簡單實例形式分析了Vue中css樣式變換動畫效果實現(xiàn)原理與相關操作技巧,需要的朋友可以參考下
    2020-02-02

最新評論