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

Сегодня вы узнаете как работать с табами в vue.js

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

  1. <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  2.  
  3. <div id="app">
  4. 	<div class="tabs">
  5. 		<div class="tabs-header">
  6. 			<button class="tabs-btn" @click="activeTab = 1" :class="{ active: activeTab === 1 }">Вкладка 1</button>
  7. 			<button class="tabs-btn" @click="activeTab = 2" :class="{ active: activeTab === 2 }">Вкладка 2</button>
  8. 			<button class="tabs-btn" @click="activeTab = 3" :class="{ active: activeTab === 3 }">Вкладка 3</button>
  9. 		</div>
  10. 		<div class="tabs-body">
  11. 			<div class="tabs-body-item" v-show="activeTab === 1">
  12. 				Содержимое вкладки 1
  13. 			</div>
  14. 			<div class="tabs-body-item" v-show="activeTab === 2">
  15. 				Содержимое вкладки 2
  16. 			</div>
  17. 			<div class="tabs-body-item" v-show="activeTab === 3">
  18. 				Содержимое вкладки 3
  19. 			</div>
  20. 		</div>
  21. 	</div>
  22. </div>
  23.  
  24. <script>
  25. new Vue({
  26. 	el: '#app',
  27. 	data: {
  28. 		activeTab: 1
  29. 	}
  30. });
  31. </script>

CSS:
  1. .tabs-header {
  2. 	border-bottom: 3px solid #eee;
  3. }
  4. .tabs-btn {
  5. 	font-size: 18px;
  6. 	border: none;
  7. 	display: inline-block;
  8. 	background: #fff;
  9. 	padding: 10px 25px;
  10. 	text-align: center;
  11. 	cursor: pointer;
  12. 	margin-bottom: -3px;
  13. 	border-bottom: 3px solid #eee;
  14. }
  15. .tabs-btn.active {
  16. 	color: #5fa03a;
  17. 	border-bottom: 3px solid #5fa03a;
  18. }
  19. .tabs-body-item {
  20. 	padding: 20px 0;
  21. }

Табы в JS-массиве
В данном примере используется директива v-for для вывода в цикле кнопок и вкладок из массива tabs:
  1. <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  2.  
  3. <div id="app">
  4. 	<div class="tabs">
  5. 		<div class="tabs-header">
  6. 			<button class="tabs-btn" v-for="tab in tabs" :key="tab.id" @click="activeTab = tab.id" :class="{ 'active': activeTab === tab.id }">{{ tab.title }}</button>
  7. 		</div>
  8. 		<div class="tabs-body">
  9. 			<div class="tabs-body-item" v-for="tab in tabs" :key="tab.id" v-show="activeTab === tab.id">
  10. 				<div v-html="tab.content"></div>
  11. 			</div>
  12. 		</div>	
  13. 	</div>	
  14. </div>
  15.  
  16. <script>
  17. new Vue({
  18. 	el: '#app',
  19. 	data: {
  20. 		activeTab: 1,
  21. 		tabs: [
  22. 			{id: 1, title: 'Вкладка 1', content: '<h2>Содержимое вкладки 1</h2>'},
  23. 			{id: 2, title: 'Вкладка 2', content: '<h2>Содержимое вкладки 2</h2>'},
  24. 			{id: 3, title: 'Вкладка 3', content: '<h2>Содержимое вкладки 3</h2>'}
  25. 		]
  26. 	}
  27. });
  28. </script>

CSS:
  1. .tabs-header {
  2. 	border-bottom: 3px solid #eee;
  3. }
  4. .tabs-btn {
  5. 	font-size: 18px;
  6. 	border: none;
  7. 	display: inline-block;
  8. 	background: #fff;
  9. 	padding: 10px 25px;
  10. 	text-align: center;
  11. 	cursor: pointer;
  12. 	margin-bottom: -3px;
  13. 	border-bottom: 3px solid #eee;
  14. }
  15. .tabs-btn.active {
  16. 	color: #5fa03a;
  17. 	border-bottom: 3px solid #5fa03a;
  18. }
  19. .tabs-body-item {
  20. 	padding: 20px 0;
  21. }

  08.06.24 / 19:54 | JS/jQuery |   102 | 1   0