Условные операторы Vue3

В Vue 3 можно использовать несколько условных операторов в шаблонах для управления рендерингом компонентов.

Основные условные операторы:v-if、v-else-if、v-elseиv-show, ниже описано их использование и различия:

  • v-if: элемент, когда условиеfalseне будет отображаться в DOM, подходит для ситуаций, когда условия меняются редко.
  • v-show: элемент всегда отображается в DOM, подходит для ситуаций, когда условия меняются часто, с лучшей производительностью при переключении видимости.
  • v-else-ifиv-else: используется для обработки нескольких условных ветвей в сочетании сv-ifиспользовать.

Условные операторы

v-if

Условно отображает элементы на основе истинности выражения. Если выражение true, элемент отображается; если false, он не отображается (элемент не будет создан в DOM).

Условная проверка использует директиву v-if. Элемент отображается только тогда, когда выражение директивы возвращает true:

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

Используйте директиву v-if на элементе:

<div id="app"> <p v-if="seen">Теперь вы видите меня</p> </div> <script>const app = { data() { return { seen: true /* Измените на false, информация не будет отображаться */ } } } Vue.createApp(app).mount('#app')</script>

Попробуйте »

Здесь директива v-if решает, вставлять ли элемент p, основываясь на значении (true или false) выражения seen.

Поскольку v-if является директивой, её необходимо добавлять к одному элементу. Если элементов несколько, их можно обернуть в элемент <template> и использовать v-if на нём. В конечном отрендеренном результате элемент <template> не будет включён.

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

Используйте директиву v-if на элементе <template>:

<div id="app"> <template v-if="seen"> <h1>Веб-сайт</h1> <p>Google</p> <p>Пример</p> <p>Taobao</p> </template> </div> <script>const app = { data() { return { seen: true /* Измените на false, информация не будет отображаться */ } } } Vue.createApp(app).mount('#app')</script>

Попробуйте »

v-else

Используется вместе с v-if: он отображает элемент, когда предшествующее выражение v-if ложно.

Вы можете использовать директиву v-else, чтобы добавить блок "else" к v-if:

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

Сгенерируйте случайное число, определите, больше ли оно 0.5, а затем выведите соответствующую информацию:

<div id="app"> <div v-if="Math.random() > 0.5">Случайное число больше 0.5</div> <div v-else>Случайное число меньше или равно 0.5</div> </div> <script> Vue.createApp().mount('#app') </script>

Попробуйте »

v-else-if

Чтобы добавить дополнительные условные проверки между v-if и v-else, можно последовательно использовать несколько директив v-else-if.

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

Проверьте значение переменной type:

<div id="app"> <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Не A/B/C </div> </div> <script> const app = { data() { return { type: "C" } } } Vue.createApp(app).mount('#app') </script>

Попробуйте »

v-else и v-else-if должны идти после v-if или v-else-if.

v-show

Условно показывает или скрывает элемент в зависимости от истинности выражения. В отличие от v-if, v-show всегда оставляет элемент в DOM и управляет видимостью элемента только через CSS-свойство display.

Мы также можем использовать директиву v-show для отображения элементов в зависимости от условий:

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

<h1 v-show="ok">Привет!</h1>

Попробуйте »

Если вам нужно часто переключать видимость элемента, рекомендуется использовать v-show, потому что она просто переключает стили CSS, а не перерисовывает весь элемент.

Другие расширения