Vue JS — Отображение списков и результата выполненных условий

Vue JS — Отображение списков и результата выполненных условий

От автора: в этом разделе мы поговорим об условном отображении, а также о том, как выводятся Vue JS списки. Что касается условного отображения, то мы рассмотрим использование if, if-else, if-else-if, show и так далее. По теме отображения списков мы рассмотрим использование for loop.

Условное отображение

Давайте начнём с примера, который иллюстрирует условное отображение. При условном отображении нам нужно получить результат только тогда, когда выполняется условие, а проверка условия выполняется с помощью if, if-else, if-else-if, show, и т.д.

v-if

Результат

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

В вышеприведённом примере мы создали кнопку и два тэга h1 с сообщением.

Переменная с именем show объявляется и инициализируется со значением true. Оно отображается рядом с кнопкой. Нажатием кнопки мы вызываем метод showdata, который переключает значение переменной show. Это значит, что при нажатии на кнопку значение переменной show будет изменяться с true на false, а с false на true.

Мы присвоили if тэгу h1, как показано в следующем фрагменте кода.

Данный код проверяет значение переменной show и если оно равно true, то будет отображаться тэг h1. Нажмите кнопку и увидите в браузере, что если значение переменной show меняется на false, то тэг h1 не отображается в браузере. Он отображается только когда переменная show имеет значение true.

В браузере будет отображаться следующее.

Если мы посмотрим код элемента в браузере, то вот что увидим, когда show имеет значение false.

Тэг h1 будет удалён из DOM, если переменная show задана как false.

Вот, что мы видим, если переменная истинна. Тэг h1 будет добавлен обратно к DOM, если переменная show имеет значение true.

v-else

На следующем примере мы добавили v-else ко второму тэгу h1.

v-else добавляется путём выполнения следующего кода.

Теперь, если show имеет значение true, то будет отображаться “This is h1 tag”, а если false, то “This is h2 tag”. Вот, что мы увидим в браузере.

Выше мы видим, что будет, если переменная show имеет значение true. Учитывая, что мы добавили v-else, второй оператор отсутствует. При нажатии на кнопку переменная show будет принимать значение false, а второй оператор будет отображаться так, как на следующем скриншоте.

v-show

v-show ведёт себя так же, как и v-if. Он также отображает и скрывает элементы, основываясь условиях. Разница между v-if и v-show заключается в том, что v-if удаляет HTML элемент из DOM, если условие является ложным, и добавляет, если условие истинно. В свою очередь, v-show скрывает элемент, если условие ложно с помощью display:none. И снова отображает элемент, если условие истинно. Таким образом, элемент всегда присутствует в dom.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

v-show присваивается HTML элементу с помощью следующего кода.

Мы использовали ту же самую переменную show, в зависимости от её значения, в браузере отображается соответствующее изображение.

Поскольку сейчас переменная show является истинной, то отображается такое изображение, как на скриншоте выше. Давайте нажмём на кнопку и посмотрим на результат.

Переменная show является ложной, поэтому изображение скрыто. Если мы просмотрим код элемента, то увидим, что div вместе с изображением являются частью DOM с заданным стилем display: none, как продемонстрировано на вышеприведённом скриншоте.

Отображение списков

v-for

Давайте рассмотрим отображение списков с помощью директивы v-for.

Переменная с именем items объявлена в качестве массива. У нас есть один метод с именем названием showinputvalue, присвоенный полю ввода, который получает названия фруктов. В методе названия фруктов, введённые в текстовом поле добавляются к массиву благодаря следующему коду.

Мы использовали v-for для отображения введённых названий фруктов, как на следующем коде. V-for помогает выполнить перебор значений, присутствующих в массиве.

Чтобы выполнить перебор массива с помощью for loop, нам нужно использовать v-for = ”a in items”, где a хранит значения в массиве и будет отображаться, пока не обработаются все элементы. Мы получим следующий результат в браузере.

После проверки кода элемента, вот что мы увидим в браузере. В DOM мы не видим директивы v-for для элемента li. Он отображается в DOM без директив VueJS.

Если мы хотим отобразить индекс массива, то нам понадобится следующий код.

Чтобы получить индекс, мы добавили в скобки ещё одну переменную, как показано в следующем коде.

В (a, index), a — это значение, а index — это ключ. На следующем скриншоте показано то, что будет отображаться в браузере. Таким образом, с помощью индекса могут отображаться любые значения.

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

Практический курс по созданию веб-приложения на VUE JS с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree