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 / 16:54 | JS/jQuery |   143 | 1   0