Junior
Посочете разликите между директивите v-show и v-if.
sobes.tech AI
Отговор от AI
v-if условно отрисува елемент, напълно го премахвайки от DOM, ако условието е невярно. v-show винаги отрисува елемента, но превключва неговото CSS свойство display между none и първоначалната стойност в зависимост от условието.
Разлики в производителността / използването:
- v-if: По-тежко начално рендериране, но по-добра производителност при редки превключвания, тъй като елементите се премахват напълно от DOM.
- v-show: По-леко начално рендериране, но по-подходящо за елементи, които често се превключват, тъй като това е само промяна на CSS свойството.
Пример за използване:
<!-- Използване на v-if -->
<template>
<div v-if="isVisible">
Този блок е видим само ако isVisible е вярно
</div>
<!-- Използване на v-show -->
<div v-show="isVisible">
Този блок винаги е в DOM, но е видим само ако isVisible е вярно
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true
};
}
}
</script>