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>