vue-cli實現tab切換

這幾天在用vue寫項目，記錄下用vue實現tab選項卡

html

 

<div class="tab-big white-tab-big">

<div class="tabs">

<span v-for="(item,index) in tabsname" :key="index"

@click="iscur=index,showTab('tab'+(index+1))" :class="{current:iscur==index}">{{item}}</span>

</div>

</div>

<div class="compare-tab-wrap">

<keep-alive>

<component :is="currentTab"></component>

</keep-alive>

</div>

 

 

<script>

 

import _tab1 from "@/Demo/_tab1.vue"; //按地圖 引入切換內容的組件tab1

import _tab2 from "@/Demo/_tab2.vue"; //按概況 引入切換的內容組件 tab2

 

export default {

components: {

tab1: _tab1,

tab2: _tab2

},

 

data() {

return {

iscur: 0,

tabsname: ["按地圖", "按概況"],

currentTab: "tab1",//默認按地圖 tab1

};

},

 

methods: {

showTab: function(tab) {

this.currentTab = tab; // tab 爲當前觸發標籤頁的組件名

}

}

};

</script>

 

tab1、tab2組件內容自定義

 

<template>

<div class="compare-tab1">

<div class="lf">

<ul>

<li>

<div class="tt">1、北京萬達國際影院</div>

<p>萬象南路669好1棟附306號、312號、313號、314號、315號</p>

</li>

<li>

<div class="tt">1、北京萬達國際影院</div>

<p>萬象南路669好1棟附306號、312號、313號、314號、315號</p>

</li>

</ul>

</div>

<div class="rf">

地圖

</div>

</div>

 

</template>