Guía

Filtros

Vue.js le permite definir filtros que pueden usarse para aplicar formato de texto común. Se puede utilizar filtros en dos lugares: interpolaciones mustache y expresiones v-bind (siendo esta última, soportada en 2.1.0+). Los filtros se deben agregar al final de la expresión de JavaScript, denotados por símbolo “pipe”:

<!-- en mustaches -->
{{ message | capitalize }}

<!-- en v-bind -->
<div v-bind:id="rawId | formatId"></div>

Puede definir filtros locales en las opciones de un componente:

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

o establecer filtros globalmente antes de crear la instancia de Vue:

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

A continuación, se muestra un ejemplo de nuestro filtro capitalize siendo utilizado:

{{ message | capitalize }}

La función del filtro siempre recibe el valor de la expresión (el resultado de la cadena anterior) como su primer argumento. En el ejemplo anterior, la función del filtro capitalize recibirá el valor de message como su argumento.

Los filtros pueden ser encadenados:

{{ message | filterA | filterB }}

En este caso, filterA, definido con un solo argumento, recibirá el valor de message, y luego se llamará a la función filterB con el resultado de filterA pasado al argumento único de filterB.

Los filtros son funciones de JavaScript, por lo tanto pueden tomar argumentos:

{{ message | filterA('arg1', arg2) }}

Aquí filterA se define como una función que toma tres argumentos. El valor de message se pasará al primer argumento. La cadena simple 'arg1' se pasará al filterA como segundo argumento, y el valor de la expresión arg2 se evaluará y pasará como el tercer argumento.

← Plugins Publicación en Producción →
¿Encontró un error o simplemente quiere contribuir con la documentación? Edite esta página en GitHub! Puesto en marcha en Netlify