Buscar..


Sintaxis

  • Vue.filter(name, function(value){}); //BASIC
  • Vue.filter(name, function(value, begin, end){}); // Basic con valores de envoltura
  • Vue.filter(name, function(value, input){}); //Dinámica
  • Vue.filter(name, { read: function(value){}, write: function(value){} }); //De doble sentido

Parámetros

Parámetro Detalles
nombre Cadena - nombre deseado del filtro
valor [Devolución de llamada] Cualquiera - valor de los datos que pasan al filtro
empezar [Devolución de llamada] Cualquier valor por venir antes de los datos pasados
fin [Devolución de llamada] Cualquier valor después de los datos pasados
entrada [Devolución de llamada] Cualquiera: entrada del usuario vinculada a la instancia de Vue para obtener resultados dinámicos

Filtros de dos vías

Con un two-way filter , podemos asignar una operación de read y write para un solo filter que cambia el valor de los mismos datos entre la view y el model .

//JS
Vue.filter('uppercase', {
    //read : model -> view
    read: function(value) {
        return value.toUpperCase();
    },

    //write : view -> model
    write: function(value) {
        return value.toLowerCase();
    }
});

/*
 * Base value of data: 'example string'
 *
 * In the view : 'EXAMPLE STRING'
 * In the model : 'example string'
 */

BASIC

Los filtros personalizados en Vue.js se pueden crear fácilmente en una sola función de llamada a Vue.filter .

//JS
Vue.filter('reverse', function(value) {
    return value.split('').reverse().join('');
});

//HTML
<span>{{ msg | reverse }}</span> //'This is fun!' => '!nuf si sihT'

Es una buena práctica almacenar todos los filtros personalizados en archivos separados, por ejemplo, en ./filters ya que es fácil reutilizar su código en su próxima aplicación. Si vas de esta manera tienes que reemplazar la parte JS :

//JS
Vue.filter('reverse', require('./filters/reverse'));

También puede definir sus propios envoltorios de begin y end .

//JS
Vue.filter('wrap', function(value, begin, end) {
    return begin + value + end;
});

//HTML
<span>{{ msg | wrap 'The' 'fox' }}</span> //'quick brown' => 'The quick brown fox'


Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow