Условная отрисовка элементов в Vue.js с помощью директив v-if, v-else-if и v-else

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

Директива v-if используется для условной отрисовки элементов в зависимости от определенного условия. Если условие истинно (true), элемент будет отрендерен, если ложно (false) - элемент не будет отрендерен.

<p v-if="showMsg">Hello, Vue.js!</p>

В данном примере, абзац с текстом "Hello, Vue.js!" будет отображен только если переменная showMsg истинна.

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

<p v-if="showMsg">Hello, Vue.js!</p>
<p v-else>Sorry, not today.</p>

В этом случае, если showMsg истинна, отображается сообщение "Hello, Vue.js!". Если showMsg ложна, отображается сообщение "Sorry, not today.".

Наконец, v-else-if используется для добавления дополнительных условий. Эта директива должна идти сразу после v-if или другой v-else-if.

<p v-if="value === '1'">Value is 1</p>
<p v-else-if="value === '2'">Value is 2</p>
<p v-else>Value is neither 1 nor 2</p>

Здесь, в зависимости от значения переменной value, отрисовывается соответствующий текст.

Эти директивы предоставляют гибкий и мощный инструмент для работы с условной отрисовкой элементов в Vue.js. Они позволяют динамически контролировать содержимое нашего интерфейса, реагируя на изменения состояния приложения.