Vue.js - работа с табами

04.03.2024

464

Табы в HTML-разметке

При клике на кнопку задается значение переменной activeTab, в зависимости от неё добавляется класс active и отображаться соответствующий див с контентом с помощью директивы v-show.

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<div id="app">
	<div class="tabs">
		<div class="tabs-header">
			<button class="tabs-btn" @click="activeTab = 1" :class="{ active: activeTab === 1 }">Вкладка 1</button>
			<button class="tabs-btn" @click="activeTab = 2" :class="{ active: activeTab === 2 }">Вкладка 2</button>
			<button class="tabs-btn" @click="activeTab = 3" :class="{ active: activeTab === 3 }">Вкладка 3</button>
		</div>
		<div class="tabs-body">
			<div class="tabs-body-item" v-show="activeTab === 1">
				Содержимое вкладки 1
			</div>
			<div class="tabs-body-item" v-show="activeTab === 2">
				Содержимое вкладки 2
			</div>
			<div class="tabs-body-item" v-show="activeTab === 3">
				Содержимое вкладки 3
			</div>
		</div>
	</div>
</div>

<script>
new Vue({
	el: '#app',
	data: {
		activeTab: 1
	}
});
</script>

HTML

CSS:

.tabs-header {
	border-bottom: 3px solid #eee;
}
.tabs-btn {
	font-size: 18px;
	border: none;
	display: inline-block;
	background: #fff;
	padding: 10px 25px;
	text-align: center;
	cursor: pointer;
	margin-bottom: -3px;
	border-bottom: 3px solid #eee;
}
.tabs-btn.active {
	color: #5fa03a;
	border-bottom: 3px solid #5fa03a;
}
.tabs-body-item {
	padding: 20px 0;
}

CSS

Результат:

Табы в JS-массиве

В данном примере используется директива v-for для вывода в цикле кнопок и вкладок из массива tabs:

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<div id="app">
	<div class="tabs">
		<div class="tabs-header">
			<button class="tabs-btn" v-for="tab in tabs" :key="tab.id" @click="activeTab = tab.id" :class="{ 'active': activeTab === tab.id }">{{ tab.title }}</button>
		</div>
		<div class="tabs-body">
			<div class="tabs-body-item" v-for="tab in tabs" :key="tab.id" v-show="activeTab === tab.id">
				<div v-html="tab.content"></div>
			</div>
		</div>	
	</div>	
</div>

<script>
new Vue({
	el: '#app',
	data: {
		activeTab: 1,
		tabs: [
			{id: 1, title: 'Вкладка 1', content: '<h2>Содержимое вкладки 1</h2>'},
			{id: 2, title: 'Вкладка 2', content: '<h2>Содержимое вкладки 2</h2>'},
			{id: 3, title: 'Вкладка 3', content: '<h2>Содержимое вкладки 3</h2>'}
		]
	}
});
</script>

HTML

CSS:

.tabs-header {
	border-bottom: 3px solid #eee;
}
.tabs-btn {
	font-size: 18px;
	border: none;
	display: inline-block;
	background: #fff;
	padding: 10px 25px;
	text-align: center;
	cursor: pointer;
	margin-bottom: -3px;
	border-bottom: 3px solid #eee;
}
.tabs-btn.active {
	color: #5fa03a;
	border-bottom: 3px solid #5fa03a;
}
.tabs-body-item {
	padding: 20px 0;
}

CSS