用Vue實現的tab標籤
阿新 • • 發佈：2019-01-02
<!doctype html> <html> <head> <meta charset="utf-8"> <title>tab標籤</title> <style> a { color: #555; } .tab { margin: 0; padding: 0; } .tab li { display: inline-block; padding: 5px 12px; color: #666; background-color: #eee; border: 1px solid #ddd; border-radius: 3px 3px 0 0; cursor: pointer; } .tab li.tab-active { color: #333; background-color: #fff; border-bottom-color: #fff; } .tab li+li { margin-left: 5px; } .tab-content { margin-top: -1px; border-top: 1px solid #ddd; } .tab-content > div { padding: 10px; } </style> </head> <body> <main id="tabBox"> <ul class="tab"> <li v-for="tab,index in tabs" :class="{'tab-active':index===currentIndex}" @click="tabSwitch(index)">{{tab.tabName}}</li> </ul> <div class="tab-content"> <div v-for="tab,index in tabs" v-show="index===currentIndex">{{tab.tabCon}}</div> </div> </main> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> var vm=new Vue({ el:'#tabBox', data:{ tabs: [ { tabName:'Vuejs', tabCon: 'I like Vuejs!' }, { tabName:'javascript', tabCon: 'I like javascript!' }, { tabName: 'html5', tabCon: 'I like html5' } ], currentIndex: 0 //儲存當前索引值 }, methods:{ tabSwitch(index){ this.currentIndex = index; } } }); </script> </body> </html>