Junior
Norādiet atšķirības starp v-show un v-if direktīvām.
sobes.tech AI
Atbilde no AI
v-if nosacīti attēlo elementu un pilnībā to noņem no DOM, ja nosacījums ir nepaties. v-show vienmēr attēlo elementu, bet pārslēdz tā CSS īpašību display starp none un sākotnējo vērtību atkarībā no nosacījuma.
Atšķirības veiktspējā / lietojumā:
- v-if: Sākotnējais renderēšana ir smagāka, bet labāka veiktspēja retu pārslēgšanu gadījumā, jo elementi tiek pilnībā noņemti no DOM.
- v-show: Vieglāka sākotnējā renderēšana, bet labāk piemērota bieži pārslēgtiem elementiem, jo tas tikai maina CSS īpašību.
Piemērs lietošanai:
<!-- v-if izmantošana -->
<template>
<div v-if="isVisible">
Šis bloks ir redzams tikai tad, ja isVisible ir patiesi
</div>
<!-- v-show izmantošana -->
<div v-show="isVisible">
Šis bloks vienmēr ir DOM, bet redzams tikai tad, ja isVisible ir patiesi
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true
};
}
}
</script>