Представлять любой массив данных и переключаться между визуализациями

Vue.js - это фреймворк с большим потенциалом. Его легко освоить, он быстрый и легкий в байтах. Если вы новичок, можете начать со следующих статей:

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

Окончательный результат вы найдете в моем репозитории.

Первые шаги

Прежде всего, давайте создадим три новых файла:

  • index.html
  • app.js
  • style.css

Добавьте в index.html ссылку на таблицу стилей, на наш файл JavaScript и, конечно же, на Vue.js:

Затем представьте макет нашего приложения:

В нашем приложении будет:

  • Кнопка для переключения между сеткой и списком
  • Кнопка для переключения между различными массивами данных, чтобы показать, что приложение может отображать разные коллекции.
  • Стандартное представление сетки, состоящее из имени столбца как первой строки и каждого элемента как строки
  • Представление списка, где каждый элемент является элементом вертикальной коллекции с изображением

Просмотр сетки без Vue.js

Без Vue.js структура представления сетки может выглядеть так:

Как видите, я не использовал тег таблицы, а просто div. Это помогает лучше переключать представление с помощью css.

Это стиль:

Наиболее важные моменты, на которые следует обратить внимание:

  • grid-wrapper, display: table
  • grid-row, display: table-row

Это выглядит так:

Просмотр списка без Vue.js

Без Vue.js структура представления списка может выглядеть так:

Стиль довольно простой, просто сочетание display: grid с flexbox:

Это выглядит так:

Интеграция с Vue.js

Представляемый объект должен быть примерно таким:

Обратите внимание, что у него есть два массива:

  • columns: только с названиями каждого свойства для отображения
  • data: массив объектов с такими же свойствами, как указано в columns

Пришло время реализовать наше приложение Vue:

Приложение Vue довольно простое:

  • isGridView используется для скрытия / отображения макета сетки или макета списка.
  • isBookData используется для изменения представленных данных. (Вам это не понадобится в производстве; это только для целей этой статьи.)
  • Вы увидите все тестовые данные в полном коде в репозитории.

Интересной частью является структура HTML, которая представляет собой комбинацию:

  • v-bind:class используется для переключения классов CSS списков / сеток на основе isGridViewCondition
  • v-for используется для отображения значений массива и имен столбцов
  • v-if для скрытия / отображения некоторых макетов на основе выбранного представления

И вот окончательный результат:

Здесь вы можете найти весь код.