Vue——vuetify中实现tab切换

原创于 2021-08-06 08:33:34 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文详细介绍了如何在Vue应用中使用Vuetify的v-tabs和v-tabs-items组件实现多标签页的切换，并展示了如何通过v-model绑定数据驱动组件状态。适合前端开发者了解Vuetify组件及其在实际项目中的应用。

在这里插入图片描述

使用vuetify中的组件 v-tabs v-tabs-items

<v-tabs v-model="tab">
	<v-tab key="tab1">tab1</v-tab>
	<v-tab key="tab2">tab2</v-tab>
	<v-tab key="tab3">tab3</v-tab>
	<v-tab key="tab4">tab4</v-tab>
</v-tabs>
<v-tabs-items v-model="tab">
    <v-tab-item key="tab1">
    <v-tab-item key="tab2">
    <v-tab-item key="tab3">
    <v-tab-item key="tab4">
</v-tabs-items>

export default {
	data(){
		return {
			tab:null
		}
	}
}