Sobes.tech
Junior

Նշեք v-show և v-if ուղղագրությունների տարբերությունները։

sobes.tech AI

Պատասխան AI-ից

v-if պայմանով ռենդերացնում է տարր, և եթե պայմանը սխալ է, այն ամբողջությամբ հեռացվում է DOM-ից: v-show միշտ ռենդերացնում է տարր, բայց փոխում է նրա CSS հատկությունը displaynone և սկզբնական արժեքի միջև կախված պայմանից:

Տարբերություններ կատարողականության / օգտագործման մեջ:

  • 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>