klik uniapp untuk menyembunyikan dan memaparkan senarai data

Dengan populariti aplikasi mudah alih, semakin ramai pembangun web telah mula berhubung dengan uniapp, rangka kerja pembangunan aplikasi mudah alih merentas platform. Apabila membangunkan aplikasi mudah alih, kami selalunya perlu memaparkan senarai data dan berharap pengguna boleh mengembangkan atau menyembunyikannya dengan mengklik butang. Keperluan ini juga sangat biasa dalam uniapp. Artikel ini terutamanya memperkenalkan cara melaksanakan fungsi mengklik untuk menyembunyikan dan memaparkan senarai data dalam uniapp.

1. Kaedah pelaksanaan

Dalam uniapp, cara biasa untuk menyembunyikan dan memaparkan senarai data adalah dengan mengawal kaedah pemaparan senarai data untuk mencapai kesan pengembangan atau penyembunyian. Dalam proses pelaksanaan khusus, ia boleh dicapai dalam dua cara berikut:

1. Kawal pemaparan senarai melalui arahan v-if

Dalam templat, anda boleh menggunakan Arahan v-jika menentukan sama ada senarai data perlu diberikan.

Sebagai contoh, tentukan pembolehubah jenis Boolean isShowList untuk menunjukkan sama ada senarai data perlu dipaparkan.

<template>
  <div>
    <button @click="switchShowList">显示/隐藏列表</button>
    <ul v-if="isShowList">
      <li v-for="(item,index) in dataList" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

Dalam templat di atas, kami menggunakan v-if="isShowList" untuk menentukan sama ada senarai data semasa perlu dipaparkan. Jika isShowList ialah true, senarai data akan dipaparkan pada halaman, jika tidak, senarai data tidak akan dipaparkan.

2. Kawal paparan dan penyembunyian senarai melalui arahan v-show

Arahan v-show adalah serupa dengan arahan v-if Gunakannya untuk mengawal sama ada elemen dipaparkan pada halaman.

<template>
  <div>
    <button @click="switchShowList">显示/隐藏列表</button>
    <ul v-show="isShowList">
      <li v-for="(item,index) in dataList" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

Dalam templat di atas, kami menggunakan v-show="isShowList" untuk menentukan sama ada senarai data semasa perlu dipaparkan. Jika isShowList ialah true, senarai data akan dipaparkan pada halaman, jika tidak, senarai data akan disembunyikan.

2. Contoh lengkap

Seterusnya, mari lihat contoh kod lengkap, termasuk mengawal pengembangan dan penyembunyian senarai data dan melaksanakan acara klik butang.

<template>
  <div>
    <button @click="switchShowList">显示/隐藏列表</button>
    <ul v-show="isShowList">
      <li v-for="(item,index) in dataList" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: ['条目1', '条目2', '条目3', '条目4', '条目5'],
      isShowList: false,
    };
  },
  methods: {
    switchShowList() {
      this.isShowList = !this.isShowList;
    },
  },
};
</script>

Dalam contoh ini, kami mula-mula mentakrifkan dua data status dataList dan isShowList. dataList digunakan untuk menyimpan data dalam senarai, dan isShowList digunakan untuk menentukan sama ada senarai itu perlu dipaparkan.

Seterusnya, dalam kod templat, kami menggunakan arahan v-show untuk mengawal paparan dan penyembunyian senarai data. Apabila isShowList ialah true, senarai data akan dipaparkan pada halaman jika tidak, ia tidak akan dipaparkan.

Akhir sekali, kami menentukan acara click dalam elemen butang dan mengikat acara itu dengan kaedah switchShowList. Dalam kaedah switchShowList, kami menggunakan operator ternary mudah untuk membalikkan nilai isShowList.

3. Ringkasan

Dalam pembangunan uniapp, keperluan untuk memaparkan senarai data dan mengembangkan atau menyembunyikannya melalui butang adalah perkara biasa. Melalui pengenalan artikel ini, anda sudah mengetahui cara untuk mencapai keperluan ini dengan menggunakan arahan v-if atau v-show.

Pada masa yang sama, jika anda juga ingin menambah baik pembentangan halaman anda, anda boleh mempertimbangkan untuk menggunakan beberapa perpustakaan komponen UI untuk membantu anda menghasilkan halaman yang kelihatan lebih baik dan lebih profesional. Uni-app telah terbina dalam beberapa pustaka komponen UI yang biasa digunakan, seperti Vant, Mint-UI, dsb., yang menyediakan komponen yang sangat mudah dan luar biasa yang boleh membantu anda membina dengan cepat yang cantik, cekap dan mudah -untuk menggunakan aplikasi mudah alih.

Atas ialah kandungan terperinci klik uniapp untuk menyembunyikan dan memaparkan senarai data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!