При клике на кнопку задается значение переменной 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>
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;
}
Результат:
В данном примере используется директива 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>
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;
}