Cara menggunakan v-if dan v-else untuk menghasilkan kandungan bersyarat dalam Vue

Vue ialah rangka kerja pembangunan bahagian hadapan yang popular yang menyediakan pelbagai arahan untuk membantu kami mengurus kandungan dinamik aplikasi kami. Dua daripada arahan, v-if dan v-else, digunakan untuk memaparkan kandungan berdasarkan syarat. Arahan

v-if membolehkan kami membenamkan ungkapan Boolean dalam templat dan kandungan yang sepadan akan dipaparkan hanya apabila ungkapan itu benar. Apabila ungkapan itu palsu, tiada apa yang diberikan.

Sebagai contoh, dalam templat Vue, kami boleh menggunakan arahan v-if dengan cara berikut:

<div v-if="isMaster">{{ message }}</div>

Dalam kod di atas, kami mengawal paparan kandungan teks melalui pembolehubah isMaster . Jika isMaster adalah benar, nilai mesej akan dipaparkan pada halaman. Jika isMaster palsu, div tidak akan diberikan.

Selain arahan v-if, Vue juga menyediakan arahan v-else. v-else hanya boleh mengikut arahan v-if dan digunakan untuk menentukan kandungan yang harus diberikan apabila ungkapan v-if adalah palsu.

Sebagai contoh, dalam templat Vue, kita boleh menggunakan kedua-dua arahan v-if dan v-else dengan cara berikut:

<div v-if="isMaster">{{ message }}</div>
{{ errMsg }}

Dalam kod di atas, jika isMaster adalah benar, maka pertama Kandungan teks dalam setiap div akan dipaparkan. Jika isMaster adalah palsu, kandungan teks dalam div kedua akan dipaparkan dan div pertama tidak akan dipaparkan.

Selain itu, Vue juga menyediakan arahan v-else-if untuk menukar kandungan rendering antara pelbagai syarat.

Sebagai contoh, dalam templat Vue, kita boleh menggunakan arahan v-if, v-else-if dan v-else bersama-sama dengan cara berikut:

<div v-if="isMaster">{{ message }}</div>
{{ teacherMsg }}
{{ errMsg }}

Dalam kod di atas, jika isMaster Jika benar, kandungan teks dalam div pertama akan dipaparkan. Jika isMaster adalah palsu dan isTeacher adalah benar, kandungan teks dalam div kedua akan dipaparkan. Jika kedua-dua isMaster dan isTeacher adalah palsu, kandungan teks dalam div ketiga akan dipaparkan.

Ringkasnya, menggunakan arahan v-if, v-else dan v-else-if dalam Vue boleh membantu kami memaparkan kandungan khusus ke halaman berdasarkan syarat. Menggunakan arahan ini meningkatkan keupayaan untuk menyesuaikan diri dengan pelbagai persekitaran dan menambah kod bersyarat apabila diperlukan. Juga, pastikan anda menguji apabila menggunakan arahan ini untuk memastikan kandungan bersyarat yang diberikan dipaparkan dengan betul.

Atas ialah kandungan terperinci Cara menggunakan v-if dan v-else untuk menghasilkan kandungan bersyarat dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!