Vue.js для начинающих: Условия, списки и циклы

Условные операторы в Vue.js управляют отображением элементов в зависимости от условий. Этот урок рассматривает v-if, v-else, v-else-if, а также работу со списками и циклами.

Условные операторы

Рассмотрим применение условных операторов JavaScript в Vue.js.

Добавим абзац с текстом «Текст может стать невидимым» и атрибут v-if:

<p v-if="show">Текст может стать невидимым</p>

Создадим переменную show:

data() {
  return {
    show: true
  }
}

Изначально текст отображается, поскольку show равно true. Изменим значение show на false:

this.show = false;

Текст исчезнет – элемент удаляется из DOM-структуры.

Создадим кнопку для управления видимостью текста:

<button @click="show = !show">Скрыть/Показать</button>

Нажатие на кнопку меняет значение show, переключая видимость текста. v-if полностью удаляет элемент из DOM при false, в отличие от v-show, который только меняет стиль display.

Рассмотрим v-else и v-else-if:

<p v-if="show">Текст 1</p>
<p v-else>Текст 2</p>

Отобразится «Текст 1» или «Текст 2» в зависимости от значения show. v-else-if добавляет дополнительные условия. Порядок v-if, v-else-if, v-else важен.

Списки и массивы

В Vue.js списки (массивы) создаются как и в JavaScript. Создадим массив cars:

data() {
  return {
    cars: [
      { model: 'BMW', speed: 200 },
      { model: 'Audi', speed: 220 },
      { model: 'Mercedes-Benz', speed: 250 },
      { model: 'Ford', speed: 180 }
    ]
  }
}

Выведем один элемент:

<p>{{ cars[2].model }}</p>

Это выведет Mercedes-Benz. Для вывода всех элементов эффективнее использовать циклы.

Циклы

Для перебора элементов массива используем директиву v-for:

<ul>
  <li v-for="(car, index) in cars">
    {{ index + 1 }}. {{ car.model }} - {{ car.speed }} км/ч
  </li>
</ul>

(car, index) in cars перебирает массив cars, car – текущий элемент, index – его индекс. Выводим номер элемента, модель и скорость. index + 1 делает нумерацию с единицы.

Урок рассмотрел условные операторы v-if, v-else, v-else-if и директиву v-for для работы со списками и циклами в Vue.js. Эти инструменты позволяют создавать динамический и интерактивный интерфейс.