Bagaimana untuk melaksanakan senarai yang runtuh menggunakan Vue?

Vue ialah rangka kerja JavaScript popular yang memudahkan untuk membina aplikasi web interaktif menggunakan Vue. Dalam artikel ini, kita akan membincangkan cara melaksanakan senarai yang runtuh menggunakan Vue. Runtuhkan senarai ialah komponen interaktif biasa yang membolehkan pengguna mengembangkan dan meruntuhkan kandungan mereka.

Dalam Vue, kami boleh melaksanakan senarai yang runtuh dengan mudah menggunakan arahan v-if dan v-show. Kedua-dua arahan ini mempunyai fungsi yang sama dan boleh mengawal keterlihatan elemen. v-if akan menambah atau mengalih keluar elemen berdasarkan syarat, manakala v-show hanya akan menogol keadaan yang dipaparkan atau tersembunyi bagi sesuatu elemen.

Pertama, kita perlu mencipta tika Vue dan melekapkannya pada elemen HTML. Kemudian tentukan tatasusunan yang akan mengandungi semua item dalam senarai yang runtuh. Dalam contoh ini, kami menganggap bahawa item senarai diformatkan seperti berikut:

{
  title: 'Item 1',
  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
},

Kami juga perlu menentukan butang dalam templat yang menogol keterlihatan setiap item senarai. Kita boleh mencapai ini menggunakan arahan v-show. Apabila butang diklik, kami akan menogol keadaan tunjukkan/sembunyikan kandunganDiv.

Berikut ialah templat komponen senarai boleh lipat asas:

<div id="app">
  <h2>折叠列表</h2>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      <button @click="toggle(index)">展开/收起</button>
      <h3>{{ item.title }}</h3>
      <div v-show="item.showContent" class="contentDiv">{{ item.content }}</div>
    </li>
  </ul>
</div>

Seterusnya, kita perlu menentukan tatasusunan item senarai dan fungsi togol dalam contoh Vue untuk menogol keterlihatan setiap item senarai. Fungsi togol akan menerima satu parameter, iaitu indeks item senarai untuk togol. Fungsi ini menyongsangkan sifat showContent item dan juga mengemas kini keadaan komponen.

new Vue({
  el: '#app',
  data: {
    items: [
      {
        title: 'Item 1',
        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        showContent: false
      },
      {
        title: 'Item 2',
        content: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
        showContent: false
      },
      {
        title: 'Item 3',
        content: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
        showContent: false
      }
    ]
  },
  methods: {
    toggle: function(index) {
      this.items[index].showContent = !this.items[index].showContent;
    }
  }
})

Akhir sekali, kita perlu menambah beberapa gaya CSS pada komponen untuk mengawal penampilan dan reka letaknya.

ul {
  list-style: none;
  padding: 0;
}

li {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 10px;
}

button {
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
  color: #333;
  cursor: pointer;
  outline: none;
  padding: 5px 10px;
}

.contentDiv {
  margin-top: 10px;
}

Kini, kami telah melengkapkan komponen senarai mudah lipat. Kami boleh menggunakan komponen ini untuk memaparkan senarai interaktif dalam aplikasi kami. Kita boleh memanjangkan komponen ini dengan menambahkan gaya tersuai dan fungsi lain.

Ringkasnya, Vue ialah rangka kerja bahagian hadapan yang sangat berkuasa yang menyediakan banyak ciri berguna yang memudahkan pembinaan aplikasi web interaktif. Menggunakan Vue, kami boleh melaksanakan komponen UI yang kompleks dengan mudah, termasuk senarai runtuh.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan senarai yang runtuh menggunakan Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!