Kaedah pelaksanaan komponen kotak lipat/akordion dalam dokumen Vue

Vue, sebagai rangka kerja JavaScript yang popular, menyediakan banyak komponen dan fungsi yang memudahkan pembangunan. Satu komponen UI biasa ialah akordion (juga dipanggil akordion), yang membolehkan pengguna mengembangkan dan meruntuhkan kandungan untuk menjimatkan ruang. Dalam dokumentasi Vue, kita boleh menemui komponen kotak lipat yang ringkas tetapi berfungsi sepenuhnya Mari kita perkenalkan kaedah pelaksanaannya.

Pertama, dalam komponen Vue, kita perlu mentakrifkan beberapa data untuk mengawal keadaan kotak lipatan yang dikembangkan. Data ini boleh menjadi nilai Boolean, seperti isCollapsed. Jika isCollapsed adalah benar, kotak lipatan diruntuhkan;

Seterusnya, kita perlu menggunakan arahan v-if atau v-show dalam templat Vue untuk mengawal paparan dan penyembunyian kotak lipatan berdasarkan keadaan isCollapsed. Arahan v-if boleh mengalih keluar elemen DOM sepenuhnya, manakala arahan v-show hanya mengawal paparan dan penyembunyian elemen melalui atribut paparan CSS. Memandangkan kandungan perlu dipaparkan apabila kotak runtuh dikembangkan, kami meletakkan kandungan di dalam arahan.

Berikut ialah contoh templat kotak runtuh mudah:

<template>
  <div>
    <button @click="isCollapsed = !isCollapsed">{{ isCollapsed ? '展开' : '收起' }}</button>

    <div v-show="!isCollapsed">
      这里是折叠框的内容。
    </div>
  </div>
</template>

Dalam templat ini, kami menggunakan butang untuk menogol nilai isCollapsed dan memaparkan teks yang sepadan pada butang. Kandungan kotak runtuh dikawal menggunakan arahan v-show dan dipaparkan apabila isCollapsed adalah palsu.

Seterusnya, kita boleh menambah beberapa gaya pada komponen kotak lipat untuk mencapai kesan antara muka yang lebih baik. Gaya asas boleh jadi:

<style>
  .collapse {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
  }
</style>

Gunakan gaya ini pada komponen kotak runtuh:

<template>
  <div class="collapse">
    <button @click="isCollapsed = !isCollapsed">{{ isCollapsed ? '展开' : '收起' }}</button>

    <div v-show="!isCollapsed">
      这里是折叠框的内容。
    </div>
  </div>
</template>

Komponen kotak runtuh ini hanya digunakan pada satu kotak runtuh. Jika kita perlu melaksanakan berbilang kotak lipatan, kita boleh menggunakan arahan gelung Vue v-for untuk menjana berbilang komponen secara dinamik. Kita boleh menggunakan tatasusunan untuk menyimpan data keadaan, tajuk dan kandungan yang sepadan dengan setiap kotak lipat, dan menggunakan v-for untuk menjana berbilang komponen. Berikut ialah contoh:

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <div class="collapse">
        <button @click="item.isCollapsed = !item.isCollapsed">{{ item.isCollapsed ? item.title + ' - 展开' : item.title + ' - 收起' }}</button>

        <div v-show="!item.isCollapsed">
          {{ item.content }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {isCollapsed: true, title: '折叠框标题1', content: '折叠框内容1'},
        {isCollapsed: true, title: '折叠框标题2', content: '折叠框内容2'},
        {isCollapsed: true, title: '折叠框标题3', content: '折叠框内容3'},
      ]
    }
  }
}
</script>

Dalam contoh ini, kami menggunakan item tatasusunan untuk menyimpan data status, tajuk dan kandungan tiga kotak runtuh. Kemudian arahan v-for digunakan untuk menghasilkan tiga komponen. Keadaan, tajuk dan kandungan yang diperluaskan bagi setiap komponen berasal daripada item tatasusunan item yang sepadan.

Ringkasnya, kaedah pelaksanaan komponen kotak lipat dalam dokumen Vue adalah sangat mudah. ​​Kita hanya perlu mentakrifkan nilai Boolean untuk mengawal keadaan pengembangan dan menggunakan v-if atau v-show arahan untuk dipaparkan dan disembunyikan. Jika anda perlu melaksanakan berbilang kotak lipat, kami boleh menggunakan arahan v-for untuk menjana berbilang komponen secara dinamik. Dengan mengkaji dan mempraktikkan kod sumber komponen ini, kami boleh menguasai penggunaan asas Vue dengan cepat dan menggunakannya untuk membina komponen dan aplikasi UI yang lebih kompleks.

Atas ialah kandungan terperinci Kaedah pelaksanaan komponen kotak lipat/akordion dalam dokumen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!