vue實(shí)現(xiàn)頂部菜單欄
vue實(shí)現(xiàn)頂部菜單欄,同一個頁面兩個菜單按鈕之間的切換
先看展示結(jié)果:點(diǎn)擊第一個按鈕,顯示內(nèi)容1 點(diǎn)擊第二個按鈕,展示內(nèi)容2
下面上源碼:注意哦,一定要代碼規(guī)劃,別學(xué)我(⊙o⊙)
<template><div> <div class='tab-content'> <div @click='cur=1' :class='{active:cur==1}'><span>數(shù)據(jù)標(biāo)注</span> </div> <div @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>
分割線-----一個簡單的按鈕切換就完成了,思路very簡單,實(shí)現(xiàn)特別方便,也很好用哦: 是選中菜單時改變樣式的代碼哦
關(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í)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. ASP動態(tài)網(wǎng)頁制作技術(shù)經(jīng)驗(yàn)分享2. .Net Core和RabbitMQ限制循環(huán)消費(fèi)的方法3. JSP之表單提交get和post的區(qū)別詳解及實(shí)例4. Xml簡介_動力節(jié)點(diǎn)Java學(xué)院整理5. 詳解瀏覽器的緩存機(jī)制6. jsp文件下載功能實(shí)現(xiàn)代碼7. 如何在jsp界面中插入圖片8. phpstudy apache開啟ssi使用詳解9. jsp實(shí)現(xiàn)登錄驗(yàn)證的過濾器10. vue3+ts+elementPLus實(shí)現(xiàn)v-preview指令
