Условия 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.
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: