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>