Поиск по сайту:

Как перебирать элементы в Vue.js с помощью V-for


Введение

Общим требованием для интерфейсных приложений является перечисление элементов. Он может принимать форму списка дел и карточных систем. Vue.js поддерживает отображение списков элементов в браузере с помощью встроенной основной директивы v-for.

В этом посте мы рассмотрим, как v-for можно использовать в приложениях Vue.

Предпосылки

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

Это исследование будет основываться на файле HTML, в котором используется размещенная в CDN (сети доставки контента) копия платформы Vue.js:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>v-for</title>
  </head>

  <body>

    <div id="app">
      <h1>{{ message }}</h1>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            message: "hello"
          }
        }
      });
    </script>

  </body>
</html>

Вы можете обратиться к этому сообщению, если начинаете работу с Vue.js.

В этот момент, если вы загрузите этот код и просмотрите этот файл в браузере, вы увидите сообщение: hello.

Использование v-for с диапазоном

Встроенная директива v-for позволяет нам перебирать элементы в цикле.

Мы можем использовать диапазон в директиве v-for для повторения заданного количества раз.

Давайте заменим содержимое нашего <div> ненумерованным списком, который повторяет элементы списка 15 раз:

<div id="app">
  <ul>
    <li v-for="item in 15">{{ item }}</li>
  </ul>
</div>

В результате получится неупорядоченный список с номерами от 1 до 15.

Использование элемента