Bagaimana untuk melaksanakan senarai yang boleh dilipat menggunakan Vue?

Vue ialah perpustakaan JavaScript popular yang digunakan secara meluas dalam bidang pembangunan web. Dalam Vue, kami boleh melaksanakan pelbagai komponen dan kesan interaktif dengan mudah. Antaranya, senarai boleh lipat adalah komponen yang lebih praktikal Ia boleh mengumpulkan data senarai untuk meningkatkan kebolehbacaan paparan data Pada masa yang sama, ia boleh dikembangkan apabila kandungan tertentu perlu dikembangkan, menjadikannya mudah untuk pengguna melihat secara terperinci maklumat. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan senarai boleh lipat.

1. Persediaan

Sebelum menggunakan Vue untuk melaksanakan senarai boleh lipat, kami perlu menyediakan kerja berikut:

1.1 Persekitaran Vue: Pasang Vue.js, yang boleh diperkenalkan melalui muat turun laman web rasmi atau pengenalan CDN.

1.2 Penyediaan data: Sediakan data yang akan dipaparkan, yang boleh berupa tatasusunan atau objek Setiap item mengandungi tajuk dan kandungan data yang dipaparkan.

2. Struktur HTML

Senarai boleh lipat kami terutamanya terdiri daripada dua bahagian, satu bahagian tajuk yang memaparkan senarai, dan satu lagi bahagian yang memaparkan kandungan senarai. Antaranya, bahagian tajuk perlu menetapkan acara klik untuk mencetuskan pengembangan dan keruntuhan bahagian kandungan. Oleh itu, kami boleh menggunakan arahan v-for Vue untuk menggelungkan senarai pemaparan dan mengikat acara klik seperti berikut:

<template>
  <div>
    <ul>
      <li v-for="(item,index) in dataList" :key="index" @click="toggle(index)">
        {{ item.title }}
      </li>
    </ul>
    <div v-for="(item,index) in dataList" :key="index">
      <div v-show="item.show">{{ item.content }}</div>
    </div>
  </div>
</template>

Dalam kod ini, kami menggunakan elemen pembungkus yang mengandungi ul dan satu set div. Antaranya, berbilang li dalam bahagian tajuk diberikan dalam ul, dan kandungan setiap li ialah item.title. Kandungan dikembangkan sepadan dengan setiap li dikawal oleh arahan v-show. Apabila item.show adalah benar, kandungan yang dikembangkan akan dipaparkan. Logik JavaScript bahagian ialah tajuk senarai, bahagian lain ialah kandungan yang sepadan dengan senarai. Oleh itu, kita boleh mentakrifkan struktur data seperti berikut:

data() {
  return {
    dataList: [
      {
        title: "列表标题1",
        content: "列表1的详细内容",
        show: false,
      },
      {
        title: "列表标题2",
        content: "列表2的详细内容",
        show: false,
      },
      {
        title: "列表标题3",
        content: "列表3的详细内容",
        show: false,
      },
    ],
  };
},

Antaranya, parameter show digunakan untuk mengawal sama ada bahagian yang dikembangkan dipaparkan. Pada mulanya, kami mahu bahagian yang dikembangkan ditutup, jadi kami menetapkan nilai persembahan kepada palsu.
3. 3.2 Klik untuk menukar keadaan dikembangkan

Kita perlu mengikat acara klik pada elemen li dalam bahagian tajuk untuk mencapai kesan kembangkan/runtuhkan klik. Kami boleh menukar keadaan pengembangan yang sepadan dengan setiap senarai dengan memanggil kaedah togol Kod khusus adalah seperti berikut:

methods: {
  toggle(index) {
    const item = this.dataList[index];
    item.show = !item.show;
  },
},

Dalam kaedah togol, kami mendapatkan item item senarai semasa dan mengawal paparan dan menyembunyikan kandungan yang dikembangkan dengan mengubah suai. parameter persembahan.

Tetapan gaya

Akhir sekali, kita perlu menggayakan senarai supaya ia dipaparkan dengan lebih cantik.

li {
  background: #eee;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

li:hover {
  background: #ccc;
}

div {
  padding: 10px;
}

Dalam CSS, kami menggayakan setiap elemen li. Kami juga menukar warna latar belakang pada tuding tetikus. Gaya bahagian kandungan yang dikembangkan juga telah ditetapkan secara ringkas.

Pada ketika ini, kami telah menyelesaikan pelaksanaan senarai boleh lipat. Kod lengkap adalah seperti berikut:

<template>
  <div>
    <ul>
      <li v-for="(item,index) in dataList" :key="index" @click="toggle(index)">
        {{ item.title }}
      </li>
    </ul>
    <div v-for="(item,index) in dataList" :key="index">
      <div v-show="item.show">{{ item.content }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        {
          title: "列表标题1",
          content: "列表1的详细内容",
          show: false,
        },
        {
          title: "列表标题2",
          content: "列表2的详细内容",
          show: false,
        },
        {
          title: "列表标题3",
          content: "列表3的详细内容",
          show: false,
        },
      ],
    };
  },
  methods: {
    toggle(index) {
      const item = this.dataList[index];
      item.show = !item.show;
    },
  },
};
</script>

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