Ajar anda langkah demi langkah cara menggunakan Vue untuk melaksanakan fungsi penukaran bar tab

Dengan pembangunan berterusan teknologi bahagian hadapan, Vue telah menjadi salah satu rangka kerja JavaScript yang paling popular. Kemunculan Vue menjadikan pembangunan bahagian hadapan lebih mudah dan lebih cekap. Dalam Vue, kita boleh membina antara muka yang kompleks melalui arahan dan komponen. Antaranya, bar tab sering muncul dalam bar navigasi atau tab tapak web Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan penukaran bar tab.

1. Buat projek Vue

Mula-mula anda perlu memasang Vue CLI dan laksanakan arahan berikut:

npm install -g vue-cli

Kemudian buat projek baharu dan laksanakan arahan berikut :

vue init webpack my-tab

Arahan ini akan mencipta projek baharu bernama "tab saya". Selepas anda mengesahkan bahawa projek itu berjaya dibuat, sila masukkan folder projek.

2. Cipta komponen tab

Dalam direktori src/komponen, buat folder bernama "tab", dan buat dua senarai tab di sebelah kiri dan kawasan kandungan di sebelah kanan dinamakan "tab-header" dan "tab-pane" masing-masing.

Dalam komponen pengepala tab, kita perlu menggunakan arahan v-for untuk menggelungkan senarai tab. Kodnya adalah seperti berikut:

<template>
  <div>
    <ul>
      <li v-for="(tab, index) in tabs" :key="index" :class="{active: currentIndex === index}">
        <a href="#" @click="changeTab(index)">{{tab}}</a>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: ['tabs'],
    data () {
      return {
        currentIndex: 0
      }
    },
    methods: {
      changeTab (index) {
        this.currentIndex = index
        this.$emit('tab-change', index)
      }
    }
  }
</script>

Komponen ini menggunakan prop untuk menerima data senarai tab yang dihantar daripada komponen induk, dan menggunakan arahan v-for untuk menggelungkan senarai dan menukar nilai currentIndex mengikut ke tab yang sedang dipilih Pada masa yang sama, peristiwa tersuai bernama "tab-change" dicetuskan.

Dalam komponen anak tetingkap tab, kita perlu memutuskan kawasan kandungan mana yang perlu dipaparkan berdasarkan nilai currentIndex. Kodnya adalah seperti berikut:

<template>
  <div>
    <div v-for="(pane, index) in panes" :key="index" v-show="currentIndex === index">
      {{ pane }}
    </div>
  </div>
</template>

<script>
  export default {
    props: ['panes', 'currentIndex'],
  }
</script>

Komponen ini menerima dua prop, anak tetingkap dan currentIndex, menggunakan arahan v-untuk untuk menggelung melalui anak tetingkap dan memaparkan kawasan kandungan yang sepadan mengikut nilai currentIndex. Kawasan kandungan ini boleh terdiri daripada sebarang elemen, seperti tag p, tag img, dsb.

3. Gunakan komponen tab dalam komponen induk

Dalam komponen induk, kita perlu menghantar data ke komponen pengepala tab dan anak tetingkap dan tentukan pilihan pengguna berdasarkan pada nilai tab currentIndex.

<template>
  <div>
    <tab-header :tabs="tabs" @tab-change="tabChange"></tab-header>
    <tab-pane :panes="panes" :currentIndex="currentIndex"></tab-pane>
  </div>
</template>

<script>
  import TabHeader from './tabs/tab-header'
  import TabPane from './tabs/tab-pane'

  export default {
    data () {
      return {
        tabs: ['Tab1', 'Tab2', 'Tab3'],
        panes: ['Content1', 'Content2', 'Content3'],
        currentIndex: 0
      }
    },
    components: {
      TabHeader,
      TabPane
    },
    methods: {
      tabChange (index) {
        this.currentIndex = index
      }
    }
  }
</script>

Dalam komponen induk, kita perlu mengimport masing-masing komponen pengepala tab dan anak tetingkap tab dan mendaftarkannya sebagai komponen setempat. Di samping itu, kita juga perlu menentukan tiga item data: tab, anak tetingkap dan currentIndex, dan menetapkan nilai seperti yang diperlukan. Akhir sekali, kami menggunakan komponen pengepala tab dan anak tetingkap tab dalam templat dan mengikat acara tersuai.

Ini adalah contoh mudah yang anda boleh ubah dan lanjutkan mengikut keperluan anda. Pada ketika ini, proses menggunakan Vue untuk menukar tab telah selesai.

Atas ialah kandungan terperinci Ajar anda langkah demi langkah cara menggunakan Vue untuk melaksanakan fungsi penukaran bar tab. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!