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>