Junior
v-show ve v-if direktifleri arasındaki farkları belirtin.
sobes.tech yapay zeka
AI'dan gelen yanıt
v-if koşula bağlı olarak bir öğeyi render eder ve koşul yanlışsa tamamen DOM'dan kaldırır. v-show her zaman öğeyi render eder, ancak koşula bağlı olarak CSS özelliği display'i none ve orijinal değer arasında değiştirir.
Performans / kullanım farkları:
- v-if: Daha ağır başlangıç render'ı, ancak nadiren değişen koşullarda daha iyi performans sağlar, çünkü öğeler tamamen DOM'dan kaldırılır.
- v-show: Daha hafif başlangıç render'ı, ancak sık değişen öğeler için daha uygundur, çünkü sadece CSS özelliği değiştirilir.
Kullanım örneği:
<!-- v-if kullanımı -->
<template>
<div v-if="isVisible">
Bu blok yalnızca isVisible doğruysa görünür
</div>
<!-- v-show kullanımı -->
<div v-show="isVisible">
Bu blok her zaman DOM'dadır, ancak yalnızca isVisible doğruysa görünür
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true
};
}
}
</script>