Написание filter в Vue.js

08.09.19

Рассматриваем Vue 2. Фильтры или filters в Vue применяются для форматирования текста. В отличие от Angular, где аналогичный функционал называется pipes, в Vue нет встроенных фильтров. Писать их нужно самому. Рассмотрим пример фильтра для удаления тегов из строки, stripTags.

Напишем в отдельном файле следующие:

// stripTags.js
 
export default (value) => {
    let div = document.createElement("div");
    div.innerHTML = value;
    let text = div.textContent || div.innerText || "";
    return text;
}

Подключим фильтр глобально

import Vue from 'vue';
import stripTags from './filters/stripTags';
 
Vue.filter('stripTags', stripTags);

Применение:

{{ message | stripTags }}

Фильтры можно объединять в цепочки:

{{ message | filterA | filterB }}

 Так как фильтр это функция - он может принимать аргументы

{{ message | filter(arg) }}

В данном случае message будет первым аргументом, arg - вторым.

blog comments powered by Disqus