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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!