vue實現頂部菜單欄

vue實現頂部菜單欄，同一個頁面兩個菜單按鈕之間的切換

先看展示結果：點擊第一個按鈕，顯示內容1 點擊第二個按鈕，展示內容2

下面上源碼：注意哦，一定要代碼規劃，別學我(⊙o⊙)

<template><div> <div class='tab-content'> <div @click='cur=1' :class='{active:cur==1}'><span>數據標注</span> </div> <div @click='cur=2' :class='{active:cur==2}'>案件數</div> </div> <div class='tab'> <div v-show='cur==1'> <div>內容1</div> </div> <div v-show='cur==2'> <div>內容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簡單，實現特別方便，也很好用哦: 是選中菜單時改變樣式的代碼哦

關于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。

更多vue學習教程請閱讀專題《vue實戰教程》

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。