Умовне відображення Vue.js

Умовний рендеринг у Vue.js дозволяє динамічно відображати або приховувати елементи на основі певних умов. Ця функція необхідна для створення адаптивних та інтерактивних інтерфейсів користувача. Vue.js надає кілька директив для обробки умовного рендерингу, що дозволяє вам ефективно керувати видимістю елементів у вашій програмі.

Директива v-if

Директива v-if використовується для умовного відтворення елементів на основі правдивості виразу. Якщо вираз обчислюється як true, елемент відображається; інакше він не включається в DOM. Ось базовий приклад:

<template>
  <div>
    <p v-if="isVisible">This text is visible if 'isVisible' is true.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

У цьому прикладі елемент абзацу відображається, лише якщо isVisible має значення true. Натискання кнопки перемикає значення isVisible і таким чином керує видимістю абзацу.

Директива v-else

Директиву v-else можна використовувати в поєднанні з v-if, щоб визначити альтернативний блок вмісту для відображення, коли умова v-if має значення false. Ось приклад:

<template>
  <div>
    <p v-if="isVisible">This text is visible if 'isVisible' is true.</p>
    <p v-else>This text is visible if 'isVisible' is false.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

У цьому прикладі, коли isVisible має значення true, відображається перший абзац. Якщо isVisible має значення false, замість нього відображається другий абзац.

Директива v-show

Директива v-show також дозволяє умовно відтворювати елементи, але вона відрізняється від v-if тим, що перемикає видимість елемента за допомогою CSS display властивість, а не додавати або видаляти її з DOM. Це може бути більш ефективним, якщо вам потрібно часто перемикати видимість елемента.

<template>
  <div>
    <p v-show="isVisible">This text is visible if 'isVisible' is true.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

У цьому прикладі директива v-show керує видимістю абзацу, встановлюючи властивість display. Елемент залишається в DOM, але прихований або показаний на основі значення isVisible.

Директива v-else-if

Директива v-else-if використовується для створення ланцюжка "else if" у вашій логіці умовного відтворення. Це дозволяє вказати додаткові умови для оцінки, чи не виконується попередня умова v-if. Ось приклад:

<template>
  <div>
    <p v-if="status === 'loading'">Loading...</p>
    <p v-else-if="status === 'error'">Error occurred!</p>
    <p v-else>Content loaded successfully.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: 'loading'
    };
  }
};
</script>

У цьому прикладі вміст, що відображається, залежить від значення властивості status. Директиви v-if, v-else-if і v-else використовуються для обробки різних станів.

Висновок

Умовний рендеринг є ключовим аспектом розробки інтерактивних і динамічних програм за допомогою Vue.js. Використовуючи такі директиви, як v-if, v-else, v-show і v-else-if, ви можете контролювати відображення елементів на основі різних умов. Оволодіння цими директивами допоможе вам створити більш адаптивні та зручні інтерфейси у ваших програмах Vue.js.