vue实现tab切换功能的几种方法

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>