Rumah > Artikel > hujung hadapan web > Teknologi canggih Vue: pemahaman mendalam tentang prinsip pelaksanaan v-if, v-show, v-else, v-else-if
Teknologi canggih Vue: Pemahaman mendalam tentang prinsip pelaksanaan v-if, v-show, v-else, v-else-if, contoh kod khusus diperlukan
Dalam Vue, v-if, v -show, v-else dan v-else-if ialah arahan pemaparan bersyarat yang biasa digunakan, yang boleh mengawal paparan dan penyembunyian elemen berdasarkan syarat. Walaupun arahan ini biasa dalam pembangunan, prinsip pelaksanaannya tidak begitu jelas. Artikel ini akan menganalisis secara mendalam prinsip pelaksanaan v-if, v-show, v-else dan v-else-if, dan memberikan contoh kod khusus.
1. Prinsip pelaksanaan v-if
v-if ialah arahan pemaparan bersyarat, yang menentukan sama ada untuk membuat elemen atau komponen berdasarkan syarat. Apabila syarat adalah benar, elemen atau komponen yang sepadan akan dipaparkan; Prinsip pelaksanaan v-if adalah seperti berikut:
Contoh kod:
<template> <div> <h1 v-if="show">Hello World!</h1> </div> </template> <script> export default { data() { return { show: true } } } </script>
Dalam contoh kod di atas, apabila rancangan adalah benar, "
2. Prinsip pelaksanaan v-show
v-show juga merupakan arahan rendering bersyarat Ia mempunyai fungsi yang sama dengan v-if dan boleh mengawal paparan dan penyembunyian elemen berdasarkan syarat. Perbezaannya ialah v-show tidak memusnahkan elemen, tetapi mengawal paparan dan menyembunyikan elemen dengan mengubah suai atribut paparan elemen. Prinsip pelaksanaan
v-show adalah seperti berikut:
Contoh kod:
<template> <div> <h1 v-show="show">Hello World!</h1> </div> </template> <script> export default { data() { return { show: true } } } </script>
Dalam contoh kod di atas, apabila show adalah benar, elemen dipaparkan dengan menetapkan "display: block"; apabila show is false, elemen disembunyikan dengan menetapkan "display: none".
3. Prinsip pelaksanaan v-else dan v-else-if
v-else dan v-else-if adalah arahan tambahan bagi v-if Mereka boleh digunakan selepas v-if untuk mengendalikan beberapa keadaan. Prinsip pelaksanaan
v-else dan v-else-if adalah seperti berikut:
Contoh kod:
<template> <div> <h1 v-if="score >= 90">优秀</h1> <h1 v-else-if="score >= 60">及格</h1> <h1 v-else>不及格</h1> </div> </template> <script> export default { data() { return { score: 85 } } } </script>
Dalam contoh kod di atas, mengikut nilai skor, kandungan yang sepadan dipaparkan melalui v-if, v-else-if dan v-else.
Ringkasnya, v-if, v-show, v-else dan v-else-if biasanya digunakan arahan pemaparan bersyarat dalam Vue Ia pada dasarnya dilaksanakan dengan mengawal paparan dan menyembunyikan elemen. Pemahaman yang mendalam tentang prinsip pelaksanaannya akan membantu kami menggunakan dan mengoptimumkan fungsi pemaparan bersyarat Vue dengan lebih baik.
Atas ialah kandungan terperinci Teknologi canggih Vue: pemahaman mendalam tentang prinsip pelaksanaan v-if, v-show, v-else, v-else-if. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!