<template> <div> <p v-if="isShow">这是一个v-if指令的示例</p> </div> </template> <script> export default { data() { return { isShow: true } } } </script>
<p>
. Memandangkan nilai isShow adalah benar, elemen akan dipaparkan. <p>
元素。由于isShow的值为true,所以该元素会被渲染。<p>二、v-show指令<template> <div> <p v-show="isShow">这是一个v-show指令的示例</p> </div> </template> <script> export default { data() { return { isShow: true } } } </script>
<p>
元素。由于isShow的值为true,所以该元素会被显示。<p>三、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: false } } } </script>
<p>
元素。由于isShow的值为false,所以v-if条件不满足,将显示v-else指令后面的<p>
元素。<p>四、v-else-if指令<template> <div> <p v-if="type === 'info'">这是一个信息提示</p> <p v-else-if="type === 'warning'">这是一个警告提示</p> <p v-else-if="type === 'error'">这是一个错误提示</p> <p v-else>这是一个未知提示</p> </div> </template> <script> export default { data() { return { type: 'warning' } } } </script>
<p>
元素。由于type的值为'warning',所以v-else-if指令中的条件被满足,将显示“这是一个警告提示”这个<p>
2. Arahan v-show <p> Arahan v-show adalah serupa dengan arahan v-if Ia juga menentukan sama ada elemen dipaparkan berdasarkan nilai ungkapan yang diberikan. Perbezaannya ialah arahan v-show mengekalkan struktur DOM elemen dan hanya mengawal paparan dan penyembunyian elemen melalui gaya CSS. <p>
. Memandangkan nilai isShow adalah benar, elemen akan dipaparkan. 🎜🎜3. Arahan v-else 🎜 Arahan v-else digunakan untuk menambah blok bersyarat "lain" selepas elemen sebelumnya dengan v-if atau v-else-if. Ia tidak mempunyai ungkapan dan hanya boleh digunakan dalam v-else untuk menunjukkan bahawa elemen akan diberikan apabila syarat sebelumnya tidak dipenuhi. 🎜🎜Berikut ialah contoh mudah yang menunjukkan penggunaan arahan v-else: 🎜rrreee🎜Dalam kod di atas, kami memutuskan elemen <p>
yang hendak dipaparkan berdasarkan nilai isShow. Oleh kerana nilai isShow adalah palsu, syarat v-if tidak dipenuhi dan elemen <p>
yang mengikuti arahan v-else akan dipaparkan. 🎜🎜4. Arahan v-else-if 🎜 Arahan v-else-if digunakan untuk menambah blok bersyarat "else if" selepas arahan v-if atau v-else-if. Ia menerima ungkapan dan menentukan sama ada untuk membuat elemen berdasarkan nilai ungkapan. 🎜🎜Berikut ialah contoh mudah yang menunjukkan penggunaan arahan v-else-if: 🎜rrreee🎜Dalam kod di atas, kami menentukan elemen <p>
yang hendak dipaparkan berdasarkan nilai daripada jenis. Oleh kerana nilai jenis ialah 'amaran', syarat dalam arahan v-else-if dipenuhi dan elemen <p>
"Ini ialah gesaan amaran" akan dipaparkan. 🎜🎜Ringkasan: 🎜v-if, v-show, v-else dan v-else-if adalah arahan pemaparan bersyarat yang biasa digunakan dalam Vue, yang melaluinya kita boleh menunjukkan atau menyembunyikan elemen secara dinamik. Dalam beberapa senario tertentu, kita boleh memilih arahan yang hendak digunakan berdasarkan syarat. Menguasai arahan ini adalah sangat penting untuk pembangun yang baru menggunakan Vue. Melalui contoh kod khusus dalam artikel ini, pemula boleh memahami dan menggunakan arahan ini dengan lebih jelas, sekali gus meningkatkan keupayaan pembangunan Vue mereka. 🎜Atas ialah kandungan terperinci Kemahiran penting untuk pemula untuk belajar Vue: kuasai v-if, v-show, v-else, v-else-if rendering bersyarat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!