Рендеринг списка Vue.js v-for с объектом

Опубликовано: 11 Августа, 2022

Vue.js — это прогрессивный фреймворк для создания пользовательских интерфейсов. Базовая библиотека ориентирована только на уровень представления, и ее легко подобрать и интегрировать с другими библиотеками. Vue также отлично подходит для сложных одностраничных приложений в сочетании с современными инструментами и вспомогательными библиотеками.

Чтобы повторять задачу в течение фиксированного промежутка времени, мы используем цикл for . v-for используется для обхода объекта и отображения необходимых данных по выбору пользователя. На веб-странице необходимо отобразить большое количество данных. Иногда данные приходят в виде объекта . Значение ключа не заключено в двойные кавычки в объекте.

Object : { key : "Geeks for Geeks" }

Синтаксис:

<li v-for="value in object">
   {{ value }}
</li>

Подход: здесь мы создадим проект Vue, а затем создадим другой пользовательский интерфейс, отображающий данные объекта.

Создание проекта Vue:

Шаг 1: Чтобы создать приложение Vue, вам необходимо установить модули Vue с помощью этой команды npm. Вы должны убедиться, что у вас установлен узел ранее.

npm install vue

Шаг 2: Используйте Vue JS через CLI. Откройте терминал или командную строку и выполните приведенную ниже команду.

npm install --global vue-cli

Шаг 3: Запустите приведенную ниже команду, чтобы создать проект.

vue init webpack myproject

Шаг 4: После создания проекта Vue перейдите в папку для выполнения различных операций.

cd myproject

Шаг для запуска приложения: Откройте терминал и введите следующую команду.

npm run dev

Откройте браузер. Откройте вкладку с запущенным локальным хостом (http://localhost:8080/), и вы увидите вывод, показанный на изображении.

Структура проекта: после запуска команд (упомянутых в предыдущих шагах), если вы откроете проект в редакторе, вы увидите аналогичную структуру проекта (как показано ниже).

Пример: запуск цикла для отображения всех ключей и их значений в объекте вместе с индексом. Первый аргумент — это значение , затем ключ , а третий — индекс в v-for.

App.vue

<template>
  <div id="app">
    <h1 style="color: green">GeeksforGeeks</h1>
    <strong>
        Print all key , values of an object 
        along with index
    </strong><br />
    <p v-for="(value, key, index) in object">
      <strong>
          {{ index }}.   {{ key }}   - {{ value }}
      </strong>
    </p>
  
  </div>
</template>
  
<script>
  export default {
    name: "App",
    data() {
      return {
        object: {
          Site: " Geeks for Geeks ",
          Framework: " Vue ",
          Type: " Article ",
          Subject: " v-for with an Object ",
        },
      };
    },
  };
</script>

Выход:

Ссылка : https://v2.vuejs.org/v2/guide/list.html#v-for-with-an-Object

JavaScript Picked

Рендеринг списка Vue.js v-for с объектом

App.vue

РЕКОМЕНДУЕМЫЕ СТАТЬИ