您好,登錄后才能下訂單哦!
如何使用vue才能實(shí)現(xiàn)頂部菜單欄功能?很多新手對此不是很清楚,為了幫助大家解決這個(gè)難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來學(xué)習(xí)下,希望你能有所收獲。
先看展示結(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>
看完上述內(nèi)容是否對您有幫助呢?如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章,請關(guān)注億速云行業(yè)資訊頻道,感謝您對億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。