Циклы в Vue

Как мы выяснили в предыдущей статье "Введение в фреймворк Vue", существует возможно добавить в настройку объекта (в "data") массив из элементов. Для вывода этого массива можно воспользоваться механизмом, который предлагает Vue.

Цикл по массиву в Vue

Попробуем создать массив, модифицировав пример из предыдущей статьи:
let app = new Vue({
   el: '#application',
     data: {
      items: ['Тише', 'мыши', 'кот', 'на', 'крыше']
   },
});
Для вывода его содержимого можно использовать цикл. В Vue такой цикл можно создать с помощью html тега <li> с атрибутом "v-for". В значении атрибута мы поставим "item in items", чтобы перебрать все значения внутри массива, который передаётся по ключу "items". Внутри тега <li> будет доступно значение текущего выбранного элемента через переменную "item". Продемонстрируем код:
<div id="application">
   <ul>
      <li v-for="item in items">{{ item }}</li>
   </ul>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         items: ['Тише', 'мыши', 'кот', 'на', 'крыше']
      },
   });
</script>
Результат выполнения этого кода будет таким:
<div id="application">
   <ul>
      <li>Тише</li>
      <li>мыши</li>
      <li>кот</li>
      <li>на</li>
      <li>крыше</li>
   </ul>
</div>
Если потребуется вывести не только значение элемента, но и его индекс, то необходимо иизменить значение атрибута "v-for" на "(item, index) in items". Тогда в переменной "index" будет находиться индекс текущего элемента при переборе. Изменим предыдущий пример, чтобы вывести ещё и индексы элементов
<div id="application">
   <ul>
      <li v-for="(item, index) in items">{{ index }} - {{ item }}</li>
   </ul>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         items: ['Тише', 'мыши', 'кот', 'на', 'крыше']
      },
   });
</script>
Результат выполнения этого кода будет таким:
<div id="application">
   <ul>
      <li>0 - Тише</li>
      <li>1 - мыши</li>
      <li>2 - кот</li>
      <li>3 - на</li>
      <li>4 - крыше</li>
   </ul>
</div>

Цикл по объекту в Vue

Атрибут "v-for" может перебирать не только массивы, но и объекты. Причем в цикле для объектов будет доступкно значение, ключ и индекс. Изменим предыыдущий пример, поставив объект из строк:
<div id="application">
   <ul>
      <li v-for="(value, key, index) in obj">{{ index }} {{ key }} {{ value }}</li>
   </ul>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         obj: { // объект, который будем использовать в цикле
            'Тише,': 'мыши, кот на крыше.', 
            'А котята': 'ещё выше', 
         }
      },
   });
</script>
Результат выполнения этого кода будет таким:
<div id="application">
   <ul>
      <li>0 - Тише, мыши, кот на крыше.</li>
      <li>1 - А котята ещё выше</li>
   </ul>
</div>

Циклы по многомерным массивам в Vue

Попробуем сделать цикл по многомерному массиву. Для этого создадим массив, в элементах которого будут объекты. Тогда доступ к свойству объекта будем получать через ключ точно так же, как при простом запросе. Изменим предыдущий пример, чтобы показать это:
<div id="application">
   <ul>
      <li v-for="item in items">{{ item.text }} {{ item.name }}</li>
   </ul>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         items: [
            {'name': 'мыши', 'text': 'Тише' },
            {'name': 'кот', 'text': 'На крыше' },
            {'name': 'котята', 'text': 'Ещё выше' },
         ]
      },
   });
</script>
Результат работы скрипта будет таким:
<div id="application">
   <ul>
      <li>Тише мыши</li>
      <li>На крыше кот</li>
      <li>Ещё выше котята</li>
   </ul>
</div>

Несколько тегов в циклах Vue

Во всех предыдущих примерах мы ставили в цикл ровно один тег <li>, давая ему атрибут "v-for". Но если нужно сделать цикл, который будет выводить сразу несколько тегов, то необходимо воспользоваться тегом <template>. Этот тег специально зарезервирован в Vue. Он является служебным и после выполнения кода он будем удалён.

Попробуем переписать один из предыдущих примером, выводя сразу несколько тегов <li> в каждой итерации цикла:
<div id="application">
   <ul>
      <template v-for="(item, index) in items">
         <li>{{ item }}</li>
         <li>{{ index }}</li>
      </template>
   </ul>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         items: ['Тише', 'мыши', 'кот', 'на', 'крыше']
      },
   });
</script>
Как можно заметить из кода, мы собрались сделать недопустимое действие с точки зрения вёрстки. То есть в тег <ul> вставить что-то помимо тега <li>. Но не переживайте, в результате выполнения кода все вспомогательные элементы будут удалены и мы получим:
<div id="application">
   <ul>
      <li>Тише</li>
      <li>0</li>
      <li>мыши</li>
      <li>1</li>
      <li>кот</li>
      <li>2</li>
      <li>на</li>
      <li>3</li>
      <li>крыше</li>
      <li>4</li>
   </ul>
</div>
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: