Работа с фильтрами в фреймворке Vue

Иногда бывает так, что при выводе данных мы хотим с ними-что-нибудь сделать. Один способ сделать это мы уже разбирали в уроке приемы работы с формами. Давайте теперь посмотрим на альтернативные варианты.

Следующий способ для преобразования данных делается через фильтры. Давайте посмотрим, как ими пользоваться.

Пусть в свойстве message хранится какая-то строка, выведем ее на экран:

<div id="app"> <p>{{ message }}</p> </div>

Пусть теперь у нас есть фильтр с названием capitalize, который делает у строки первую букву заглавной. Реализацию этого фильтра мы должны будем сделать самостоятельно, но пусть пока считаем, что она уже есть. В этом случае фильтр будет применятся так: через вертикальную палочку | к нашему свойству message:

<div id="app"> <p>{{ message | capitalize }}</p> </div>

Давайте теперь напишем реализацию нашего фильтра capitalize. Он будет представлять собой функцию, которая параметром принимает строку, а возвращает эту же строку, но с заглавной первой буквой:

function(str) { return str[0].toUpperCase() + str.slice(1); }

Теперь нам необходимо зарегистрировать наш фильтр. Для этого его следует написать в настройку filters нашего объекта Vue. Давайте зарегистрируем нашу функцию под именем capitalize:

let app = new Vue({ el: '#app', data: { message: 'hello', }, filters: { // Регистрируем фильтр capitalize: capitalize: function(str) { return str[0].toUpperCase() + str.slice(1); } } });

Все, им можно пользоваться. Давайте попробуем:

<div id="app"> <p>{{ message | capitalize }}</p> </div> let app = new Vue({ el: '#app', data: { message: 'hello', }, filters: { capitalize: function(str) { return str[0].toUpperCase() + str.slice(1); } } });

Запустите этот код и содержимое свойства message выведется с заглавной первой буквой.

Сделайте фильтр uppercase, который будет переводить всю строку в верхний регистр.

Сделайте фильтр lowercase, который будет переводить всю строку в нижний регистр.

Сделайте фильтр capitalizeWords, который будет переводить в верхний регистр первую букву каждого слова в строке.

Сделайте фильтр formatDate, который будет принимать параметром дату в формате 'год-месяц-день' и преобразовывать ее в формат 'день.месяц.год'.

Сделайте фильтр getDay, который будет принимать параметром число от 1 до 7 и преобразовывать его в соответствующее название дня недели. Например, 1 преобразуется в 'понедельник', 2 во 'вторник' и так далее.

Сделайте фильтр numFormat, который будет принимать параметром число и отделять пробелами тройки цифр в этом числе. Например, из числа 12345678 фильтр должен сделать 12 345 678.

Цепочки фильтров

Фильтры можно объединять в цепочки. Пусть у нас есть фильтр lowercase, который переводит все буквы в нижний регистр и уже реализованный нами выше фильтр capitalize.

Пусть в свойстве message строка хранится в верхнем регистре, вот так: 'HELLO'. А мы хотели бы сделать из нее вот такую строку: 'Hello'. Применим вначале фильтр lowercase для преобразования всех букв в нижний регистр, а потом с помощью capitalize сделаем первую букву заглавной:

<div id="app"> <p>{{ message | lowercase | capitalize }}</p> </div> let app = new Vue({ el: '#app', data: { message: 'HELLO', }, filters: { capitalize: function(str) { return str[0].toUpperCase() + str.slice(1); }, lowercase: function(str) { return str.toLowerCase(); } } });

Сделайте фильтр, который будет находить квадратный корень из числа. Сделайте также фильтр, который будет округлять дробь до 2-х знаков в дробной части. Примените комбинацию данных фильтров к какой-нибудь дроби.

Фильтры в атрибутах

Фильтры также можно использовать в комбинации с v-bind. Давайте попробуем сделать это на какой-нибудь задаче.

Пусть в свойстве str записан текст 'header':

let app = new Vue({ el: '#app', data: { str: 'header', }, });

Давайте в атрибут id абзаца запишем содержимое свойства str:

<div id="app"> <p v-bind:id="str">Абзац</p> </div>

В результате выполнения этого кода получится абзац с id="header".

Давайте теперь сделаем фильтр, который будет добавлять в конец нашего id строку '-block'. То есть мы хотим не id="header", а id="header-block". Вот этот фильтр:

formatId: function(value) { return value + '-block'; }

Применим его следующем образом:

<div id="app"> <p v-bind:id="str | formatId">Абзац</p> </div>

Соберем все вместе и запустим:

<div id="app"> <p v-bind:id="str | formatId">Абзац</p> </div> let app = new Vue({ el: '#app', data: { str: 'header', }, filters: { formatId: function(value) { return value + '-block'; } } });

В результате получим абзац с id="header-block".

Пусть в атрибуте title (всплывающая подсказка) какого-нибудь тега выводится дата в формате год-месяц-день. Сделайте и примените фильтр, который будет преобразовывать эту дату в формат день.месяц.год.

Параметры в фильтрах

Фильтры являются JavaScript функциями, и потому могут принимать параметры, например, следующий код - {{ message | myFilter('str1', 'str2') }} - эквивалентен такому вызову: myFilter(message, 'str1', 'str2') - то есть то, к чему применяется фильтр оказывается его первым параметром, а остальные параметры идут вслед за ним.

Давайте модифицируем предыдущую задачу с id="header-block" так, чтобы строка 'block' передавалась параметром фильтра.

Вот реализация сказанного, разберите ее самостоятельно:

<div id="app"> <p v-bind:id="str | formatId('block')">Абзац</p> </div> let app = new Vue({ el: '#app', data: { str: 'header', }, filters: { formatId: function(value, postfix) { return value + '-' + postfix; } } });