Ana içeriğe geç

Koşullu Renderleme

Koşullu Renderleme

Elementi koşullu olarak renderlamak için v-if direktifini kullanabiliriz:

<h1 v-if="awesome">Vue harika!</h1>

Bu `sadeceawesomedeğerinin [doğru](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) olması durumunda renderlanacaktır. Eğerawesome` yanlış bir değer alırsa, DOM'dan kaldırılacaktır. — Vue.js Kılavuzu

Koşulun diğer dallarını belirtmek için v-else ve v-else-if de kullanabiliriz:

<h1 v-if="awesome">Vue harika!</h1>
<h1 v-else>Ah hayır 😢</h1>
ipucu

Şu anda, demo her iki `'i de aynı anda gösteriyor ve buton hiçbir şey yapmıyor. Onlara v-ifvev-elsedirektiflerini eklemeyi deneyin ve butonu kullanarak aralarında geçiş yapabilmemiz içintoggle()` metodunu uygulayın.

v-if hakkında daha fazla bilgi: Rehber - Koşullu Renderleme