Cara menukar tab vue

Dalam Vue.js, gunakan penukaran tab untuk menavigasi antara kandungan berbeza dengan mudah. Tab biasanya terdiri daripada panel pengepala dan kandungan, dan pengguna boleh memilih panel yang berbeza dengan memilih pengepala. Dalam Vue.js, kita boleh menggunakan arahan v-if dan atribut isActive untuk melaksanakan penukaran tab. Berikut ialah contoh komponen tab asas:

<template>
  <div>
    <ul>
      <li v-for="(tab, index) in tabs" :key="index" :class="{ active: tab.isActive }" @click="selectedTab = tab">
        {{ tab.name }}
      </li>
    </ul>

    <div v-for="(tab, index) in tabs" :key="index" v-if="tab.isActive">
      {{ tab.content }}
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tabs: [
          { name: 'Tab 1', content: 'Content for Tab 1', isActive: true },
          { name: 'Tab 2', content: 'Content for Tab 2', isActive: false },
          { name: 'Tab 3', content: 'Content for Tab 3', isActive: false }
        ]
      }
    },
    
    computed: {
      selectedTab() {
        return this.tabs.find(tab => tab.isActive);
      }
    },
    
    methods: {
      selectTab(tab) {
        this.tabs.forEach(tab => tab.isActive = false);
        tab.isActive = true;
      }
    }
  }
</script>

Dalam kod di atas, kami mula-mula mentakrifkan tab tatasusunan yang mengandungi maklumat tab Setiap tab mempunyai nama, kandungan dan nilai Boolean isActive digunakan untuk menentukan sama ada tab dipilih. Kami juga mentakrifkan atribut yang dikira selectedTab, yang digunakan untuk mendapatkan objek tab yang dipilih pada masa ini.

Kemudian, dalam templat, kami menggunakan arahan v-for untuk memaparkan pengepala semua tab dan menentukan sama ada tab semasa dipilih berdasarkan atribut isActive. Kami juga menambahkan pendengar acara @click pada elemen pengepala, yang memanggil kaedah selectTab dan menghantar objek tab semasa sebagai parameter.

Dalam bahagian panel kandungan, kami sekali lagi menggunakan arahan v-for untuk memaparkan kandungan semua tab dan menggunakan arahan v-if untuk menentukan sama ada panel semasa perlu dipaparkan berdasarkan atribut isActive.

Akhir sekali, dalam objek kaedah, kami mentakrifkan kaedah selectTab, yang mengemas kini keadaan tab apabila pengguna mengklik pada pengepala tab. Kaedah ini mula-mula menetapkan sifat isActive semua tab kepada palsu, dan kemudian menetapkan sifat isActive bagi tab yang dipilih kepada benar.

Menggunakan kod di atas, anda boleh melaksanakan komponen tab dengan cepat, tetapi ini hanyalah pelaksanaan asas Anda boleh menukar dan memanjangkannya mengikut keperluan anda sendiri, seperti menambah kesan animasi, kandungan slot, dsb.

Atas ialah kandungan terperinci Cara menukar tab vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!