Фильтрация файла Json с помощью Vue ⇐ Html
-
Гость
Фильтрация файла Json с помощью Vue
При использовании Vue.js я столкнулся с вещью, которую не знаю, как сделать: отфильтровать часть файла Json. Позвольте мне объяснить лучше: Я использую файл Json, полный электронных устройств, таких как компьютеры, мыши, клавиатуры и т. д. Я хотел бы показать их в виде категорий: -Компьютеры компьютеры здесь... -Периферийные устройства периферия здесь... -Мониторы мониторы здесь... -Эк...
Теперь, чтобы показать продукты, я создал файл «Card.vue»:
импортировать { defineProps } из "vue" const {продукт } = defineProps(["продукт"]) импортируйте {RouterLink} из "vue-router" {{ Product.name }} {{ product.description }}
.карта{ переполнение: скрыто; граница-радиус: 0%; /* поле справа: 5 пикселей; поле внизу: 5 пикселей; */ box-shadow: 1px 1px 10px красный; курсор: указатель; } .карта .img{ ширина: 300 пикселей; высота: 300 пикселей; маржа: 0; } .card img{ ширина: 100%; высота: 100%; } .центр{ дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; }
А затем для главной страницы я создал HomeView.vue. Теперь я застрял здесь. Я не знаю, как использовать с некоторыми типами фильтров... Я попробовал что-то вроде этого:
Это шаблон моего файла Json:
{ "идентификатор": 1, "name": "Компьютер номер 1", «цена»: 1699,99, "тип": "компьютер" }, { "идентификатор": 8, "name": "Микрофон", «цена»: 79,99, "тип": "периферийные устройства" }, { "идентификатор": 11, "name": "Монитор 75 Гц", «цена»: 129,99, "тип": "монитор" } Спасибо!
При использовании Vue.js я столкнулся с вещью, которую не знаю, как сделать: отфильтровать часть файла Json. Позвольте мне объяснить лучше: Я использую файл Json, полный электронных устройств, таких как компьютеры, мыши, клавиатуры и т. д. Я хотел бы показать их в виде категорий: -Компьютеры компьютеры здесь... -Периферийные устройства периферия здесь... -Мониторы мониторы здесь... -Эк...
Теперь, чтобы показать продукты, я создал файл «Card.vue»:
импортировать { defineProps } из "vue" const {продукт } = defineProps(["продукт"]) импортируйте {RouterLink} из "vue-router" {{ Product.name }} {{ product.description }}
.карта{ переполнение: скрыто; граница-радиус: 0%; /* поле справа: 5 пикселей; поле внизу: 5 пикселей; */ box-shadow: 1px 1px 10px красный; курсор: указатель; } .карта .img{ ширина: 300 пикселей; высота: 300 пикселей; маржа: 0; } .card img{ ширина: 100%; высота: 100%; } .центр{ дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; }
А затем для главной страницы я создал HomeView.vue. Теперь я застрял здесь. Я не знаю, как использовать с некоторыми типами фильтров... Я попробовал что-то вроде этого:
Это шаблон моего файла Json:
{ "идентификатор": 1, "name": "Компьютер номер 1", «цена»: 1699,99, "тип": "компьютер" }, { "идентификатор": 8, "name": "Микрофон", «цена»: 79,99, "тип": "периферийные устройства" }, { "идентификатор": 11, "name": "Монитор 75 Гц", «цена»: 129,99, "тип": "монитор" } Спасибо!
Мобильная версия