Sobes.tech
Junior

v-show va v-if direktivlari o'rtasidagi farqlarni nomlang.

sobes.tech AI

AIdan javob

v-if shart bilan elementni render qiladi va shart noto'g'ri bo'lsa, uni DOMdan to'liq olib tashlaydi. v-show har doim elementni render qiladi, lekin uning CSS xususiyati display ni shartga qarab none va asl qiymat o'rtasida o'zgartiradi.

Ishlash / foydalanishdagi farqlar:

  • v-if: Dastlabki render qilish og'irroq, ammo kam o'zgaradigan shartlar uchun yaxshiroq ishlash, chunki elementlar to'liq DOMdan olib tashlanadi.
  • v-show: Dastlabki render qilish osonroq, ammo tez-tez o'zgaradigan elementlar uchun yaxshiroq, chunki bu faqat CSS xususiyatini o'zgartiradi.

Foydalanish misoli:

<!-- v-if dan foydalanish -->
<template>
  <div v-if="isVisible">
    Bu blok faqat isVisible haqiqat bo'lsa ko'rinadi
  </div>

  <!-- v-show dan foydalanish -->
  <div v-show="isVisible">
    Bu blok doimo DOMda, lekin faqat isVisible haqiqat bo'lsa ko'rinadi
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
}
</script>