Работа с фильтрами в фреймворке 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 выведется с заглавной первой буквой.

Цепочки фильтров
Фильтры можно объединять в цепочки. Пусть у нас есть фильтр 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();
}
}
});

Фильтры в атрибутах
Фильтры также можно использовать в комбинации с 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".

Параметры в фильтрах
Фильтры являются 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;
}
}
});