Для сделать вкладку (tab) активной динамически на основе внешнего управления в Vue.js, необходимо использовать условные классы или привязки данных.
Первый способ - использование условных классов. В HTML-разметке внутри компонента, который отвечает за вкладки, нужно добавить директиву v-bind:class. Эта директива будет устанавливать или удалять класс активного состояния в зависимости от значения булевой переменной. Например:
<template>
<div>
<div
v-bind:class="{ active: activeTab === 'tab1' }"
@click="activeTab = 'tab1'"
>
Tab 1
</div>
<div
v-bind:class="{ active: activeTab === 'tab2' }"
@click="activeTab = 'tab2'"
>
Tab 2
</div>
<div
v-bind:class="{ active: activeTab === 'tab3' }"
@click="activeTab = 'tab3'"
>
Tab 3
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeTab: 'tab1'
}
}
}
</script>
<style>
.active {
background-color: blue;
color: white;
}
</style>
В этом примере используется переменная activeTab, которая хранит информацию о текущей активной вкладке. Когда пользователь кликает на одну из вкладок, значение переменной activeTab обновляется, что приводит к изменению класса активного состояния.
Второй способ - использование привязки данных. В HTML-разметке внутри компонента также нужно добавить директиву v-bind:class, но уже с использованием названия класса в качестве значения. Например:
<template>
<div>
<div
v-bind:class="{'active': activeTab === 'tab1'}"
@click="activeTab = 'tab1'"
>
Tab 1
</div>
<div
v-bind:class="{'active': activeTab === 'tab2'}"
@click="activeTab = 'tab2'"
>
Tab 2
</div>
<div
v-bind:class="{'active': activeTab === 'tab3'}"
@click="activeTab = 'tab3'"
>
Tab 3
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeTab: 'tab1'
}
}
}
</script>
<style>
.active {
background-color: blue;
color: white;
}
</style>
В этом случае класс активного состояния будет добавляться, если значение переменной activeTab соответствует названию вкладки.
Оба этих способа позволяют активировать и деактивировать вкладки динамически на основе значения переменной activeTab. Когда пользователь выбирает другую вкладку, соответствующий класс будет установлен у активного элемента, а у остальных вкладок класс удалится. Вы можете применять стили к этому классу для изменения внешнего вида активной вкладки.
Кроме того, вы можете добавить логику для отображения или скрытия контента, связанного с каждой вкладкой, с использованием условных операторов или директивы v-show или v-if.