Иногда бывает так, что при выводе данных мы хотим с ними-что-нибудь сделать. Один способ сделать это мы уже разбирали в уроке приемы работы с формами. Давайте теперь посмотрим на альтернативные варианты.
Следующий способ для преобразования данных делается через фильтры. Давайте посмотрим, как ими пользоваться.
Пусть в свойстве 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;
}
}
});