Vue. Директива v-if. Условный рендеринг.

Об условных операторах в шаблонах Vue

Часто, когда мы с вами будем писать какой-то код внутри нашего template Vue, нам может потребоваться каким-то образом использовать условные операторы: if, else, else if (базовые команды, которые могут нам встречаться в любом языке программирования). 

Мы можем использовать подобные операторы и в шаблонах Vue. Есть соответствующие Vue директивы для этих операторов и они должны применяться к какому-то элементу DOM разметки. 

Задача этих условных директив - показать какой-то элемент, либо его скрыть. 

Каким образом можно оформить эту директиву в синтаксисе Vue.js. 

Для этого, давайте рассмотрим простой пример. Допустим, что у нас есть какой-то компонент. 

На уровне данных у этого компонента есть следующее свойство:

data() {

    return {

      loading: false

     }

  }

Подробнее про уровень данных Vue компонентов можно посмотреть здесь.

Допустим, что оно показывает состояние загружается ли какой-то элемент либо нет и имеет логическое значение Истина, либо Ложь. 

Нам нужно в зависимости от значения этого свойства показывать ту, либо другую информацию. 

Директивы Vue для условных операторов

Например, если какой-то блок загружается, мы выводим текст "Загрузка", иначе выводим Контент.

<div v-if="loading">Загрузка</div>
<div v-else>Контент</div>  

Директива во Vue, которая отвечает за показ какого-либо контента при выполнении какого-либо условия называется v-if.

Директива, которая выполняется в случае если условие v-if не выполняется, называется v-else.

Т.к. для директивы v-if используется логическое значение, то мы пишем просто v-if="loading", либо мы могли бы написать так v-if="loading === true".

Если бы нужно было проверять соответствие строки какому-то значению, мы могли бы написать следующее выражение v-if="test = 'проба'".

Что произойдет если мы между двумя этими блоками с условными директивами добавим еще один элемент DOM разметки. Например, так:

<div v-if="loading">Загрузка</div>
<div>111</div>
<div v-else>Контент</div> 

В этом случае мы получим ошибку, что между элементами с условными директивами не должно быть других элементов.

Сложная условная логика с более одним условием

Теперь давайте рассмотрим более сложную логику: предположим, у нас есть какой-то select, у которого есть какое-либо значение.

data() {

    return {

      select: 'Выбор 1'

    }

}

И нам нужно в зависимости от всех возможных значений свойства select, выводить разные значения в DOM разметке.

Здесь в шаблоне уже будет немного более сложная логика: если это, иначе если то, иначе. В этом случае разметка может выглядеть следующим образом:

<div v-if="select === 'Выбор 1'">Выбор 1</div>
<div v-else-if="select === 'Выбор 2'">Выбор 2</div>
<div v-else>Что-то другое</div>

Таким образом, у нас добавилась еще одна директива, которая называется v-else-if. Она позволяет организовать условие Иначе-Если.

Может быть более одной такой директивы:

<div v-if="select === 'Выбор 1'">Выбор 1</div>
<div v-else-if="select === 'Выбор 2'">Выбор 2</div>
<div v-else-if="select === 'Выбор 3'">Выбор 3</div>
<div v-else>Что-то другое</div>

Отличие от директивы v-show

Во Vue есть похожая на v-if директива, которая называется v-show. На первый взгляд, они очень похожи друг на друга, но есть существенные отличия. Главное их от личие в том, что v-if убирает элемент из DOM разметки документа, а v-show, просто скрывает его. Более подробно об этих отличиях можно почитать в соответствующей статье. 

Таким образом, используя операторы v-if, v-else-if и v-else, вы можете писать какую-то условную логику в ваших шаблонах, в том Vue приложении, которое вы разрабатываете.