Senjata rahsia pemaparan bersyarat Vue: penjelasan terperinci tentang penggunaan dan perbandingan kesan bagi v-if, v-show, v-else, v-else-if

Senjata rahsia rendering bersyarat Vue: penjelasan terperinci tentang penggunaan dan perbandingan kesan v-if, v-show, v-else, v-else-if

Vue, sebagai rangka kerja bahagian hadapan yang popular, memberikan kami pelbagai alatan dan arahan untuk mengawal paparan dan menyembunyikan pandangan. Dalam Vue, pemaparan bersyarat ialah operasi biasa yang digunakan untuk memutuskan sama ada untuk menunjukkan atau menyembunyikan elemen berdasarkan keadaan yang berbeza. Dalam artikel ini, kita akan membincangkan arahan pemaparan bersyarat dalam Vue secara terperinci: v-if, v-show, v-else, v-else-if, dan membandingkan penggunaan dan kesannya. Pada masa yang sama, kami akan menyediakan contoh kod khusus untuk membantu pembaca memahami dengan lebih baik senario aplikasi arahan ini.

1. v-if directive
   Arahan v-if ialah salah satu arahan pemaparan bersyarat yang paling biasa digunakan dalam Vue. Ia memutuskan sama ada untuk membuat elemen berdasarkan syarat yang ditentukan. Apabila syarat itu benar, elemen akan diberikan ke dalam DOM, jika tidak, ia akan dialih keluar daripada DOM. Arahan v-if mempunyai overhed pensuisan yang tinggi dan akan mencipta semula atau memusnahkan elemen apabila keadaan berubah.

Berikut ialah contoh penggunaan arahan v-if:

<template>
  <div>
    <p v-if="isShow">这是一个使用v-if指令的示例</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
    };
  },
};
</script>

Dalam contoh di atas, apabila isShow adalah benar, elemen perenggan akan diberikan kepada Dalam DOM; apabila isShow palsu, elemen perenggan akan dialih keluar daripada DOM.

2. arahan v-show
   Arahan v-show adalah serupa dengan arahan v-if, kedua-duanya digunakan untuk rendering bersyarat, tetapi terdapat beberapa perbezaan antara keduanya. Arahan v-show mengawal paparan dan penyembunyian elemen dengan mengubah suai atribut paparan CSS elemen tersebut. Apabila syarat adalah benar, elemen dipaparkan apabila keadaan adalah palsu, elemen itu tersembunyi. Berbeza dengan v-if, arahan v-show mempunyai overhed pensuisan yang lebih sedikit Ia hanya mengubah atribut paparan elemen dan tidak benar-benar mencipta atau memusnahkan elemen.

Berikut ialah contoh penggunaan arahan v-show:

<template>
  <div>
    <p v-show="isShow">这是一个使用v-show指令的示例</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
    };
  },
};
</script>

Dalam contoh di atas, apabila isShow adalah benar, elemen perenggan akan dipaparkan ; apabila When isShow adalah palsu, elemen perenggan akan disembunyikan.

3. v-else command
   Arahan v-else digunakan bersama-sama dengan arahan v-if atau v-show. Ini bermakna elemen semasa adalah "penafian" elemen sebelumnya. Arahan v-else mesti mengikut arahan v-if atau v-show dan tidak boleh mempunyai sebarang parameter atau ungkapan.

Berikut ialah contoh menggunakan arahan v-else:

<template>
  <div>
    <p v-if="isShow">这是一个使用v-if指令的示例</p>
    <p v-else>这是一个使用v-else指令的示例</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
    };
  },
};
</script>

Dalam contoh di atas, apabila isShow adalah benar, elemen perenggan pertama akan diberikan kepada DOM; apabila isShow adalah palsu, elemen perenggan kedua akan diberikan ke dalam DOM.

4. v-else-if command
   Arahan v-else-if digunakan bersama-sama dengan arahan v-if atau v-show. Ini bermakna unsur semasa ialah "penafian unsur sebelumnya dan penegasan syarat lain". Arahan v-else-if mesti mengikut arahan v-if atau v-show dan boleh mempunyai satu parameter atau ungkapan.

Berikut ialah contoh penggunaan arahan v-else-if:

<template>
  <div>
    <p v-if="type === 'A'">这是类型A的示例</p>
    <p v-else-if="type === 'B'">这是类型B的示例</p>
    <p v-else>这是其他类型的示例</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 'A',
    };
  },
};
</script>

Dalam contoh di atas, rendering yang berbeza akan berlaku bergantung pada nilai yang berbeza taip elemen perenggan ke dalam DOM. Apabila jenis ialah 'A', elemen perenggan pertama akan dipaparkan;

Ringkasnya, v-if, v-show, v-else, v-else-if biasanya digunakan arahan pemaparan bersyarat dalam Vue. Kesemuanya mempunyai kelebihan tersendiri dan senario yang boleh digunakan. Jika anda perlu kerap menukar paparan dan menyembunyikan elemen, dan overhed pemaparan adalah agak kecil, anda boleh menggunakan arahan v-show jika anda perlu mencipta atau memusnahkan elemen secara dinamik berdasarkan keadaan yang berbeza, atau overhed pensuisan adalah besar , anda boleh menggunakan arahan v-if jika Jika anda perlu membuat elemen berbeza berdasarkan berbilang syarat, anda boleh menggunakan arahan v-else-if jika anda perlu membuat beberapa elemen lalai apabila keadaan v-if atau arahan v-show tidak dipenuhi, anda boleh menggunakan arahan v-else.

Saya berharap melalui pengenalan artikel ini, pembaca dapat lebih memahami dan menggunakan arahan pemaparan bersyarat dalam Vue, dan memilih arahan yang sesuai untuk mengawal paparan dan penyembunyian pandangan mengikut keperluan khusus.

Atas ialah kandungan terperinci Senjata rahsia pemaparan bersyarat Vue: penjelasan terperinci tentang penggunaan dan perbandingan kesan bagi v-if, v-show, v-else, v-else-if. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!