Vue.js ile Koşullu Görünüm (v-if / v-else)
Vue.js’te v-if ve v-else direktifleri, bileşenlerin veya HTML elemanlarının görünürlüğünü koşula göre kontrol etmemizi sağlar. Bu örnekte bir butona tıklayarak mesajın görünümünü değiştiriyoruz. Bu yapı, bildirim sistemlerinden dinamik menülere kadar birçok senaryoda kullanılır.
<div id="app">
<h2>Koşullu Görünüm Örneği</h2>
<button @click="goster = !goster">
{{ goster ? "Gizle" : "Göster" }}
</button>
<p v-if="goster">🎉 Vue.js ile koşullu görünüm aktif!</p>
<p v-else>💡 Mesaj gizlendi.</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
goster: true
};
}
}).mount("#app");
</script>Kod Açıklaması
Vue.js’te v-if ve v-else direktifleri, bileşenlerin veya HTML elemanlarının görünürlüğünü koşula göre kontrol etmemizi sağlar.
Bu örnekte bir butona tıklayarak mesajın görünümünü değiştiriyoruz.
Bu yapı, bildirim sistemlerinden dinamik menülere kadar birçok senaryoda kullanılır.
Nasıl Çalışır?
Bu kod örneği, Web Speech API kullanılarak sesli olarak açıklanmaktadır. Kod bloğunun üzerine mouse ile geldiğinizde otomatik olarak açıklama başlar.
Kullanım Alanları
Web Speech API
Bu kod örneği Web Speech API kullanılarak sesli olarak açıklanmaktadır.
İlgili Kodlar
<div id="app">
<h2>Canlı Veri Bağlama Örneği</h2>
<input v-model="mesaj" placeholder="Bir şey yaz...">
<p>{{ mesaj }}</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global....Vue.js ile Veri Bağlama (Data Binding)
Kendi Konuşan Kodunuzu Oluşturun
Web Speech API ile kendi projelerinizde de konuşan kod örnekleri oluşturabilirsiniz.