Cara menghalang komponen vue daripada dipaparkan (tiga kaedah)

Vue ialah rangka kerja JavaScript yang sangat berkuasa dan popular yang boleh membantu pembangun membina aplikasi yang kompleks. Ciri komponenisasi Vue membolehkan pembangun membahagikan keseluruhan aplikasi kepada bahagian yang berasingan dan boleh digunakan semula, yang meningkatkan kecekapan pembangunan dan kebolehselenggaraan. Tetapi dalam beberapa kes, kami mungkin perlu menghalang pemaparan komponen Vue. Artikel ini akan menerangkan cara mencapai matlamat ini.

1 Mengapa menghalang pemaparan komponen Vue

Dalam sesetengah kes, kami mungkin perlu menghalang pemaparan komponen Vue. Berikut ialah beberapa situasi biasa:

1 Apabila komponen tidak dimuatkan sepenuhnya, kami mungkin mahu ia tidak dipaparkan untuk mengelakkan beberapa ralat.

2. Apabila kita perlu membuat keputusan secara dinamik sama ada untuk menghasilkan komponen berdasarkan syarat tertentu, kita memerlukan cara yang mudah untuk mencapai matlamat ini.

3. Mekanisme ini juga boleh digunakan apabila kita ingin menunjukkan/menyembunyikan komponen berdasarkan kebenaran pengguna.

2. Gunakan arahan v-if

Vue menyediakan cara yang sangat mudah untuk menghalang pemaparan komponen, iaitu menggunakan arahan v-if. Arahan v-if akan melakukan pertimbangan bersyarat sebelum komponen diberikan Jika syarat adalah benar, komponen akan diberikan, jika tidak komponen tidak akan diberikan.

Berikut ialah contoh mudah:

<template>
  <div>
    <div v-if="showComponent">
      这是组件的内容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showComponent: false
    };
  }
};
</script>

Dalam contoh di atas, komponen hanya akan dipaparkan jika sifat showComponent adalah benar. Jika sifat showComponent adalah palsu, komponen tidak akan dipaparkan.

3. Gunakan arahan v-show

Selain arahan v-if, Vue juga menyediakan arahan lain untuk mengawal rendering komponen, iaitu arahan v-show. Berbeza dengan arahan v-if, arahan v-show tidak menilai keadaan sebelum komponen diberikan. Ia hanya mengawal paparan/penyorok komponen melalui atribut "display" CSS.

Berikut ialah contoh mudah:

<template>
  <div>
    <div v-show="showComponent">
      这是组件的内容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showComponent: false
    };
  }
};
</script>

Dalam contoh di atas, komponen akan dipaparkan jika sifat showComponent adalah benar, dan tersembunyi jika harta itu palsu. Perlu diingatkan bahawa menggunakan arahan v-show tidak mengalih keluar komponen daripada DOM, jadi ia mempunyai kesan kecil terhadap prestasi komponen.

4. Gunakan arahan v-cloak

Selain daripada dua arahan di atas, Vue juga menyediakan arahan v-cloak untuk mengelakkan masalah kelipan halaman. Apabila komponen belum diselesaikan oleh contoh Vue, semua kandungan dalam komponen akan dipaparkan dalam penyemak imbas. Ini boleh menyebabkan halaman berkelip semasa memuatkan. Arahan v-cloak menyembunyikan kandungan komponen sebelum ia dihuraikan, dengan itu mengelakkan isu kelipan halaman.

Berikut ialah contoh mudah:

<template>
  <div v-cloak>
    这是组件的内容
  </div>
</template>

Dalam contoh di atas, arahan v-cloak akan menyembunyikan kandungan komponen sebelum ia dihuraikan sehingga contoh Vue sedia ia.

5. Ringkasan

Dalam artikel ini, kami memperkenalkan tiga kaedah untuk menghalang komponen Vue daripada dipaparkan: menggunakan arahan v-if, menggunakan arahan v-show dan menggunakan v-cloak arahan. Setiap kaedah mempunyai kelebihan sendiri dan senario yang boleh digunakan. Pembangun boleh memilih kaedah yang sesuai untuk melaksanakan kawalan pemaparan komponen berdasarkan keperluan sebenar. Semoga artikel ini bermanfaat kepada anda.

Atas ialah kandungan terperinci Cara menghalang komponen vue daripada dipaparkan (tiga kaedah). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!