vue实现tab切换功能的几种方法
1.组件切换
利用vue里的 :is属性和keep-alive缓存
效果图
代码
<template>
<div>
<div class="tab">
<ul class="tab_button">
<li
v-for="(item,index) in tabList" // 循环语句写tab按钮
:key="index"
:class="{active:currentClass==index}" // 设置选中按钮的样式
@click="toggleTab(item.tab_con,index)" // 点击切换tab,传参绑定选中tab的样式和内容
>
{{item.title}} // 按钮的文字
</li>
</ul>
</div>
<div class="tab_con">
<keep-alive> // keep-alive 内容会被缓存,不会一直渲染dom元素
<firstTab :is="currentTab"></firstTab> // is绑定选中tab的内容
</keep-alive>
</div>
</div>
</template>
<script>
// 引入三个tab内容组件
import firstTab from './firstTab'
import secondTab from './secondTab'
import thirdTab from './thirdTab'
export default {
name: 'Home',
props: {},
data() {
return {
currentTab: 'firstTab', // 默认选中tab
currentClass: 0, // 默认选中按钮样式
tabList:[
{
title: 'firstTab', // tab文字
tab_con: 'firstTab' // tab对应内容块
},
{
title: 'secondTab',
tab_con: 'secondTab'
},
{
title: 'thirdTab',
tab_con: 'thirdTab'
}
]
};
},
methods: {
toggleTab(tab_con,currentClass){
this.currentTab = tab_con; // 选中tab内容块展示
this.currentClass = currentClass; // 选中tab样式
}
},
components: {
firstTab,
secondTab,
thirdTab
},
}
</script>
<style scoped>
.tab_button li{width: 220px; height: 84px; border: 1px solid #999; cursor: pointer; display: inline-block; margin-left: 24px; border-radius: 8px; font: bold 24px/84px 'Microsoft Yahei'; color: #333; text-align: center;}
.tab_button li.active{ border: 1px solid #f3ae19; color: #f3ae19} // 选中tab 样式
</style>
2.v-show 控制内容切换
和组件切换原理类似,适合tab内容少,可以直接放在同一个页面
<template>
<div>
<div class="tab">
<ul class="tab_button">
<li
v-for="(item,index) in tabList"
:key="index"
:class="{active:currentClass==index}"
@click="toggleTab(index)" // 只传一个参数用来控制选中tab的样式以及选中tab对应内容块的显示
>{{item}}</li>
</ul>
</div>
<div> // 三个tab对应内容块
<div class="tab_con" v-show="currentTab==0">
firstTab
</div>
<div class="tab_con" v-show="currentTab==1">
secondTab
</div>
<div class="tab_con" v-show="currentTab==2">
thirdTab
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Home',
props: {},
data() {
return {
currentTab: 0,
currentClass: 0,
tabList:[ 'firstTab', 'secondTab', 'thirdTab']
};
},
methods: {
toggleTab(current){
this.currentTab = current;
this.currentClass = current;
}
}
}
</script>
<style scoped>
.tab_button li{width: 220px; height: 84px; border: 1px solid #999; background: transparent; cursor: pointer; display: inline-block; margin-left: 24px; border-radius: 8px;
font: bold 24px/84px 'Microsoft Yahei'; color: #333; text-align: center;}
.tab_button li.active{ border: 1px solid #f3ae19; color: #f3ae19}
.tab_con{ width: 714px; height: 400px; background: #ccc; color: #333; margin-left: 64px; font-size: 64px; text-align: center; line-height: 400px;}
</style>
3.路由切换
通过router-link实现,对地址栏和数据请求友好,但是tab按钮和内容块不在一个页面,需要跳转
要定义路由
代码
<template>
<div>
<div class="tab">
<router-link to="firstTab" class="router-link">firstTab</router-link>
<router-link to="secondTab" class="router-link">secondTab</router-link>
<router-link to="thirdTab" class="router-link">thirdTab</router-link>
</div>
</div>
</template>
<script>
export default {
name: 'Home',
}
</script>
<style scoped>
.router-link{width: 220px; height: 84px; border: 1px solid #999; background: transparent; cursor: pointer; display: inline-block; margin-left: 24px; border-radius: 8px;
font: bold 24px/84px 'Microsoft Yahei'; text-align: center; text-decoration: none; color: #333; }
</style>