vue tab切換小例
阿新 • • 發佈:2018-11-21
<template> <div> <h2>tab切換測試</h2> <ul class="tab-title"> <li :class="{active:activeIndex == index }" v-for="(item,index) in titleList" :key="index" @click="tabChange(index)">{{item}}</li> </ul> <ul class="tab-content"> <li v-if="activeIndex == 0">show1</li> <li v-if="activeIndex == 1">show2</li> <li v-if="activeIndex == 2">show3</li> <li v-if="activeIndex == 3">show4</li> </ul> </div> </template> <script> import pdf from 'vue-pdf' export default { components: { pdf }, data() { return { titleList:['頭1','頭2','頭3','頭4'], activeIndex:0, } }, methods:{ tabChange(index){ console.log(index); this.activeIndex = index; } } } </script> <style scoped="scoped" lang="less"> .tab-title{ width: 100%; display: flex; justify-content: space-around; li{ border: 1px solid coral; font-size: 20px; padding: 20px 30px; flex: 1; } .active{ background: greenyellow; } } .tab-content{ width: 100%; height: 300px; font-size: 24px; color: blueviolet; border: 1px solid blue; } </style>