Junior
111
questionbank
Назовите отличия директив v-show и v-if.
AI答案
sobes.tech 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>