tab切换
<template> <div class="all"> <ul class="title"> <li :class="{active:index===nowIndex}" v-for="(item,index) in tabList" :key="index" @click="toggleTab(index)">{{item}}</li> </ul> <div class="content"> <tab1 class="con" v-show="nowIndex===0"></tab1> <tab2 class="con" v-show="nowIndex===1"></tab2> <tab3 class="con" v-show="nowIndex===2"></tab3> </div> </div> </template> <script> import tab1 from '@/components/common/tab1.vue' import tab2 from '@/components/common/tab2.vue' import tab3 from '@/components/common/tab3.vue' export default { components: { tab1,tab2,tab3 }, data(){ return{ tabList:['tab1','tab2','tab3'], nowIndex:0, isShow:false } }, methods:{ toggleTab(index){ this.nowIndex = index } } } </script> <style> .all{ 600px; margin: auto; } ul{ height: 60px; 100%; padding: 0; margin: 0; list-style: none; border:1px solid #ccc; border-bottom:none; } li{ 33.1%; height: 60px; float: left; border-right: 1px solid #ccc; } .content{ 600px; height:300px; } .con{ 600px; height:300px; border: 1px solid #ccc; } </style>