Vue.js
Filtros personalizados
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