Фильтры в Vue

Если вы знакомы с командной строкой Linux, то аналогией к фильтрам Vue служит оператор конвейера "|" (вертикальная черта. Функционал и запись одинаковы.

В этой статье попробуем обработать вывод с помощью одного или нескольких фильтров.

Фильтр Vue

Возьмём простейший пример вывода сообщения из свойства:

<div id="application">
   <div>{{ text }}</div>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         text: 'Тише, мыши, кот',
      },
   });
</script>

Результатом выполнения такого кода будет простой вывод текста "Тише, мыши, кот". Но если в фигурных скобках добавить вертикальную черту после слова "text" и поставить название функции {{ text | addText }}. То в функцию первым аргументом будет передано значение переменной "text". Приведём пример:

<div id="application">
   <div>{{ text | addText }}</div>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         text: 'Тише, мыши, кот',
      },
      filters: {
         addText: function(str) {
            return str + ' на крыше';
         },
      },
   });
</script>

Как можно догадаться, результатом выполнения такого кода будет предложение "Тише, мыши, кот на крыше". Оно сложится из значения переменной "text" - "Тише, мыши, кот" и строки внутри функции " на крыше".

Обратите внимание, что функция "addText" записана внутри объекта "filters". Функции передаётся строка. Функция возвращает значение (в функции есть return).

Несколько фильтров Vue подряд

Как сказали в начале статьи, функционал фильтров похож на функционал конвейера в Linux - можно делать цепочки фильтров. К примеру, так:

<div id="application">
   <div>{{ text | addText | addMoreText }}</div>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         text: 'Тише, мыши, кот',
      },
      filters: {
         addText: function(str) {
            return str + ' на крыше. ';
         },
         addMoreText: function(str) {
            return str + ' А котята ещё выше.';
         },
      },
   });
</script>

После выполнения такого кода можно будет увидеть уже два предложения, потому что сработают последовательно обе функции: сначала результат передастся в функцию "addText", а потом по цепочке в функцию "addMoreText". Результат будет таким:

<div id="application">
   <div>Тише, мыши, кот на крыше. А котята ещё выше.</div>
</div>

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

Данные передаются фильтрам в качестве первого параметра. Помня об этом, можно использовать остальные аргументы функций, которые используются в фильтре. То есть если мы хотим использовать два аргумента в функции фильтр, то необходимо записать код так: {{ text | addText(arg1, arg2) }}. При этом внутри объекта Vue нужно будет создать функцию с тремя аргументами: addText(str, arg1, arg2) - в первом аргументе будет передаваемое значение. Попробуем сделать это:

<div id="application">
   <div>{{ text | addText('на', 'крыше') }}</div>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         text: 'Тише, мыши, кот',
      },
      filters: {
         addText: function(str, arg1, arg2) {
            return str + ' ' + arg1 +  ' ' + arg2;
         },
      },
   });
</script>

Результат будет таким:

<div id="application">
   <div>Тише, мыши, кот на крыше</div>
</div>

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

В прошлых статьях "CSS классы в Vue" и "Атрибут style в Vue" мы разобрали использование директивы "v-bind" для изменения значений атрибутов. Но и с ним можно использовать фильтры. Попробуем модифицировать вывод строки свойств стилей:

<div id="application">
   <div v-bind:style="styles | modifyStyles">Текст</div>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         styles: {
            'color': 'red',
            'font-size': '14 px',
         },
      },
      filters: {
         modifyStyles: function(str) {
            return str + ' font-weight: bold;';
         },
      },
   });
</script>

В результате получится элемент с тремя свойствами стилей:

<div id="application">
   <div style="color: red; font-size: 14 px; font-weight: bold;">Текст</div>
</div>