დაწერეთ v-show და v-if დირექტივების განსხვავებები.

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>