Вкладки

<script setup lang="ts">
import { ref } from "vue";
const selectedTab = ref(0);

const tabs = ['Один', 'Два', 'Три', 'Четыре'];

</script>
<template>
  <div class="panel pad">
    <div class="tabs-header">
      <ul>
        <li v-for="(tab, idx) in tabs" :class="{active: idx == selectedTab}" @click="selectedTab = idx">
          <button>{{ tab }}</button>
        </li>
      </ul>
    </div>
    <div class="tabs-body">
      {{ selectedTab }}
    </div>
  </div>
</template>

0