vue實(shí)現(xiàn)頂部菜單欄
更新時(shí)間：2020年11月08日 17:11:14 作者：Sara0064
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頂部菜單欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
vue實(shí)現(xiàn)頂部菜單欄，同一個(gè)頁面兩個(gè)菜單按鈕之間的切換
先看展示結(jié)果：
點(diǎn)擊第一個(gè)按鈕，顯示內(nèi)容1 點(diǎn)擊第二個(gè)按鈕，展示內(nèi)容2
下面上源碼：注意哦，一定要代碼規(guī)劃，別學(xué)我(⊙o⊙)
<template>
<div>
<div class="tab-content">
<div class="tab-content1" @click="cur=1" :class="{active:cur==1}"><span>數(shù)據(jù)標(biāo)注</span> </div>
<div class="tab-content2" @click="cur=2" :class="{active:cur==2}">案件數(shù)</div>
</div>
<div class="tab">
<div v-show="cur==1">
<div>內(nèi)容1</div>
</div>
<div v-show="cur==2">
<div>內(nèi)容2</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return{
cur:1
}
},
methods:{
}
}
</script>
<style scoped>
.tab-content .active{
background-color: #194e84 !important;
color: #fff;
}
.tab-content1{
text-align: center;
cursor: pointer;
width: 150px;
height: 30px;
border: 1px solid #ccc;
}
.tab-content2{
margin-top:-30px;
text-align: center;
cursor: pointer;
margin-left:200px;
width: 150px;
height: 30px;
border: 1px solid #ccc;
}
</style>
分割線-----一個(gè)簡單的按鈕切換就完成了，思路very簡單，實(shí)現(xiàn)特別方便，也很好用哦
:class="{active:cur==1}" 是選中菜單時(shí)改變樣式的代碼哦
關(guān)于vue.js組件的教程，請大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
更多vue學(xué)習(xí)教程請閱讀專題《vue實(shí)戰(zhàn)教程》
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue模式history下在iis中配置流程，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
Vant?UI中van-collapse下拉折疊面板默認(rèn)展開第一項(xiàng)的方法
之前做項(xiàng)目的時(shí)候,使用了Collapse折疊面板,下面這篇文章主要給大家介紹了關(guān)于Vant?UI中van-collapse下拉折疊面板默認(rèn)展開第一項(xiàng)的相關(guān)資料,需要的朋友可以參考下2022-03-03
CLI是一個(gè)全局安裝的npm包，提供了終端里的vue命令。它可以通過vue create快速搭建一個(gè)新項(xiàng)目，或者直接通過vue serve構(gòu)建新想法的原型。你也可以通過vue ui通過一套圖形化界面管理你的所有項(xiàng)目2022-11-11
vue select選擇框數(shù)據(jù)變化監(jiān)聽方法
今天小編就為大家分享一篇vue select選擇框數(shù)據(jù)變化監(jiān)聽方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Vue?Router4路由導(dǎo)航守衛(wèi)實(shí)例全面解析
這篇文章主要為大家介紹了Vue?Router4路由導(dǎo)航守衛(wèi)實(shí)例全面解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
vue實(shí)現(xiàn)pdf文檔在線預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)pdf文檔在線預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
Vue實(shí)現(xiàn)插槽下渲染dom字符串的使用
本文主要介紹了Vue實(shí)現(xiàn)插槽下渲染dom字符串的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue+element+electron仿微信實(shí)現(xiàn)代碼
這篇文章主要介紹了vue+element+electron仿微信實(shí)現(xiàn),本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
這篇文章主要為大家介紹了vue2從template到render模板編譯入口詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue中如何實(shí)時(shí)監(jiān)聽本地存儲(chǔ)
這篇文章主要介紹了vue中如何實(shí)時(shí)監(jiān)聽本地存儲(chǔ)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04