Циклы в компонентах Vue

В прошлой статье "Компоненты в Vue" мы разобрались с компонентами, зачем они нужны, как передавать в них переменные. В этой статье завершим тему компонентов и научимся делать циклы с ними.

Создание компонентов в цикле

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