Источник: Nuances of Programming
Представляйте любой массив данных и переключайтесь между визуализациями
Vue.js — это простой в изучении, быстрый, легковесный и очень перспективный фреймворк.
В данной статье я расскажу о создании Vue приложения для представления текстовых данных из массива и изменения их визуализации (табличный и списковый вид).
Конечный результат доступен в репозитории.
Первые шаги
Для начала создадим три новых файла:
- index.html
- app.js
- style.css
В файле index.html пропишем таблицу стилей, JavaScript файл и, конечно же, Vue.js:
<head>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link href="style.css" rel="stylesheet" />
</head>
Теперь придумайте дизайн приложения:
В нашем приложении будет следующее:
- Кнопка для переключения между табличным и списковым представлением.
- Кнопка для переключения между массивами данных. Так вы показываете, что приложение может отображать различные коллекции.
- Стандартный табличный вид. Первая строка — название столбца. Каждый элемент размещается в отдельной строке.
- Списковое представление: каждый элемент становится частью вертикальной коллекции со своим изображением.
Табличное представление без Vue.js
Реализация табличного вида без Vue.js выглядит так:
Как видите, я не пользовался тегом table, а ограничился только div. Куда удобнее реализовать смену представлений через css:
На что обратить внимание:
- grid-wrapper, display: table
- grid-row, display: table-row
Выглядит примерно так:
Списковое представление без Vue.js
Списковое представление без Vue.js выглядит вот так:
Этот стиль очень простой и представляет собой сочетание display: grid с flexbox:
И получается вот это:
Интеграция Vue.js
Объект для представления выглядит примерно так:
Обратите внимание, что в нем есть два массива:
- columns с перечнем (именами) свойств для отображения;
- data — массив объектов со свойствами из columns.
Настало время реализовать наше приложение в Vue:
У нас получилось очень простое приложение:
- isGridView — свойство для отображения/сокрытия табличного или спискового представления макета.
- isBookData — свойство для изменения представляемых данных. В рабочей версии оно не понадобится, а здесь используется для обучающих целей.
Самое интересное здесь — это структура HTML, которая представляет собой сочетание следующих элементов:
- v-bind:class для переключения списковых/табличных CSS классов в зависимости от значения isGridViewCondition
- v-for для отображения значений массивов и названий столбцов;
- v-if — для сокрытия/отображения макетов в зависимости от заданного представления.
А вот и конечный результат:
Весь код можно найти в репозитории.
Читайте также:
Читайте нас в телеграмме и vk
Перевод статьи Francesco Bonizzi: Switching Between Grid View and List View With Vue.js