[ВАЖНО - Читай описание] Фильтры во Vue.js
HTML-код
- Опубликовано: 1 фев 2020
- --------------------------------------------------------------------------------------------------------------------------------------------------------
ВАЖНО - Видео на этом канале 3х летней давности и большинство уже НЕАКТУАЛЬНЫЕ в силу изменения синтаксиса, методов и подходов во Vue.js версии 3. Все видео были записаны на Vue.js версии 2. Много чего уже просто НЕ БУДЕТ РАБОТАТЬ или выдаст ошибки.
Новый канал на актуальном стеке Vue.js v3, Pinia, Vue router@next, Ionic (мобильные приложения), FireBase (база данных, аутентификация и тд) - / @intothecoding
НО! Новый канал ведется на АНГЛИЙСКОМ ЯЗЫКЕ - так что у вас есть уникальная возможность научиться кодить и подтянуть язык - так как Английский нужен всегда!
Жду вас на новом канале!
--------------------------------------------------------------------------------------------------------------------------------------------------------
В этом уроке сделаем фильтры для преобразования цен в нужный формат в нашем интернет-магазине!
Ссылка на документация по фильтрым: ru.vuejs.org/v2/guide/filters...
Репозиторий проекта: github.com/antonboltnev/tutor...
Приятного просмотра!
![[ВАЖНО - Читай описание] Поиск по каталогу с главной страницы Vue js магазина](http://i.ytimg.com/vi/1pay8z5-QfM/mqdefault.jpg)
![[ВАЖНО - Читай описание] Поиск по каталогу с главной страницы Vue js магазина](/img/tr.png)
Зачетноо по Filter)) Спасибо
СПАСИБО)
👍
Спасибо за урок! А в каком из уроков вы делали оповещение о добавлении в корзину. Я что то найти не могу.
Fessan ruclips.net/video/1voPB5k0ZMY/видео.html
! ВАЖНО - Читайте описание к видео ! 🔥🔥🔥👆👆👆
new Intl.format и будет пробел для тыс
Спасибо) решил это сделать, заменив строку
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, " ");
на
parts[0] = new Intl.NumberFormat('ru-RU').format(parts[0]);
это понадобилось, потому что у меня в каталоге цены могут быть и 999 и 999 999
Мне вот интересно, около недели назад начал изучвть вью, и вот вопрос:
А почему неся в беке изначально писать, например 100.99, 100.98 и тд? я правда не понимаю, зачем это нужно и почему так делают?
Строго говоря нет особой проблемы на беке добавить функцию которая будет автоматически приводить цену к нужному значению, но тут скорее пример про другое - про то как можно описать пользовательский фильтр и обрабатывать значения (кстати вообще любые, строго говоря ты можешь и строки и массивы перемалывать)
@@yoirishi ну вообщем понятно, но ну до конца.
это из разряда: в поле где записывается имя(буковками) кто-то будет писать цифры. зачем? и я не докапываюсь лишь бы докопаться, я хочу понять смысл. учу один, поэтому спрашивать не у кого, и приходится "чушь" писать.
и я считаю(это лично мое мнение) примеры должны быть конкретными и реалистичными( еще раз, мое мнение)
vue 3 version
computed: {
fixedPrice() {
return this.product_data.price.toFixed(2)
}
}
и вот этот fixedPrice меняете вместо product_data.price. Фсё работает)
во vue3 не работают,
нужна альтернатива через computed
А как сделать так, чтобы отображалось определенное количество товаров? Например, чтобы на главное было не больше 4 товаров. Заранее, спасибо
Oleg Olegovich ну массив товаров отрежьте методом slice() и покажите
И как value может придти в виде строки? я не понимаю? объясните.
В данном примере идет речь про цену товара, так? цена цена обозначается циферками, так? так как она может быть в виде ""? это что такое?
js не типизированный язык, поэтому ты можешь передать хоть "голые" цифры, и они отработаю как положенно, хоть строковое значение ("123" к примеру). Поэтому он и добавляет парс флоат, что бы во втором случае привести значение value к голым цифрам
мне кажется контент для новичка сильно недооценён, получить оптом косарик лайков ты не получишь, но в уме держи + спасибо большое.
отлично, все работает, как нужно, только значения максимальной и минимальной цены уже не соответствуют
Они из другого урока остались
Было бы интересней показать глобально регистрацию фильтра через main.js , чтоб не мучиться регистрируя в каждый файл отдельно, это тоже как вариант
А что там показывать?:) тотже импорт прописать не в компонент а в main.js. Но это супер плохая практика. Такие действия буквально сообщают системе, что я хочу использовать фильтр во всех компонентах. Грязный подход.
@@gofrontend2220 Здесь бы я поспорил, что плохого, если одни и те же фильтры используешь в разных файлах. Разве это плюс, прописывать дублированные данные в каждом файле, Другое дело если это в одном файле было. Краткость сестра таланта.
Вася Иванов почитайте бестпрактисы. Лучше импортировать по необходимости.
@@gofrontend2220 бестпрактисы не панацея. По 1 фильтру на 1 файл, также загадит все в большом приложении. Если это бестпрактика , тогда я хз. Тоже самое , явно не бестпрактис приписывать во вьюхе знак рубля в хтмл код, а уж тем более в функцию, которая должна возвращать только отформатированные число цены. Интересно будет, когда на банальном сайте человек сменит рубли на доллары, а к отформатированному числу по прежнему будет приставать строковое значение буквы Р
Кажется в 3 вью фильтры уже deprecated
Не кажется, а так и есть