Условия if, else-if else в Vue

В предыдущей статье Методы и события в Vue (часть 2) был рассмотрен пример, в котором строка удаляется при клике на неё. Но как быть, если нам необходимо скрыть некоторые генерируемые элементы при значении свойства объекта data. Для подобного функционала нам потребуется знание директивы "v-if", которая в Vue представляет собой условие. Напишем простейший пример, используя её:

<div id="application">
   <ul>
      <li v-if="show">Мышь</li>
   </ul>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         show: true
      },
   });
</script>

Если "show" будет иметь значение "true", то пункт списка будет показан. Если "false", то пункт будет скрыт.

То что стоит внутри директивы "v-if" (атрибута) обрабатывается точно так же, как и содержание условия "if" в обычном javascript. К примеру, мы можем воспользоваться восклицательным знаком, чтобы сделать отрицание условия:

<div id="application">
   <ul>
      <li v-if="show">Мышь</li>
      <li v-if="!show">Кот</li>
   </ul>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         show: true
      },
   });
</script>

Пункт списка с текстом "Кот" будет скрыт.

Помимо директивы v-if существует ещё и v-else и v-else-if для построения сложнйо логики на Vue. Но учтите, что при создании таких условий элементы с частами условий должны идти друг за другом. Нельзя разрывать их. Продемонстрируем способ их применения:

<div id="application">
   <ul>
      <li v-if="mouse">Мышь</li>
      <li v-else-if="!cat">Кот</li>
      <li v-else="!kittens">Котята</li>
   </ul>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         mouse: false,
         cat: true,
         kittens: false
      },
   });
</script>

В результате выполнения этого кода будет показан только элемент списка с текстом "Котята".

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

<div id="application">
   <ul>
      <li v-if="10 <= cheese && cheese <= 50">Сыр</li>
      <li v-else-if="mouse">Мышь</li>
      <li v-else-if="!cat">Кот</li>
      <li v-else="!kittens">Котята</li>
   </ul>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         cheese: 25,
         mouse: false,
         cat: true,
         kittens: false
      },
   });
</script>

Результатом работы такого кода станет отображение пункта списка с текстом "Сыр", потому что "cheese" равно числу 25, что меньше 50 и больше 10.