Escribir un filtro en Vue.js

08.09.19

Considere Vue 2. Los filtros  en Vue se usan para formatear texto. A diferencia de Angular, donde una funcionalidad similar se llama pipes, Vue no tiene filtros incorporados. Necesitas escribirlos tú mismo. Considere un filtro de ejemplo para eliminar etiquetas de una cadena, stripTags.

Escribamos lo siguiente en un archivo separado:

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

Conecte el filtro globalmente

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

Utilizar:

{{ message | stripTags }}

Los filtros se pueden combinar en cadenas:

{{ message | filterA | filterB }}

Como un filtro es una función, puede tomar argumentos

{{ message | filter(arg) }}

En este caso, message será el primer argumento, arg el segundo.

blog comments powered by Disqus