Vue.js -- Resumen del uso de filtros

过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结果的简单函数。Vue有很多很便利的过滤器，过滤器通常会使用管道标志 “ | ”， 比如：

{{ msg | capitalize }}
// 'abc' => 'ABC' 

uppercase过滤器 : 将输入的字符串转换成大写字母的过滤器。

VueJs允许你链式调用过滤器，简单的来说，就是一个过滤器的输出成为下一个过滤器的输入，然后再次过滤。接下来，我们可以想象一个比较简单的例子，使用了Vue的 filterBy + orderBy 过滤器来过滤所有商品products。过滤出来的产品是属于水果类商品。

filterBy过滤器 : 过滤器的值必须是一个数组，filterBy + 过滤条件。过滤条件是：'string || function'+ in 'optionKeyName'

orderBy过滤器 : 过滤器的值必须是一个数组，orderBy + 过滤条件。过滤条件是：'string || array ||function' + 'order ≥ 0 为升序 || order < 0 为降序'

接下来，我们可以看下下面这个例子：我们有一个商品数组products，我们希望遍历这个数组，并把他们打印成一张清单，这个用v-for很容易实现。

<ul class="product">
  <li v-for="product in products|filterBy '水果' in 'category' |orderBy 'price' 1">
    {{product.name}}-{{product.price | currency}}
  </li>
</ul> 

En el ejemplo anterior, usamos el filtro filterBy para filtrar la lista en 'category' que contiene la palabra clave 'fruta', la lista devuelta es la lista que solo contiene la palabra clave 'fruta', y el filtro orderBy realiza un orden ascendente por precio, si queremos un orden descendente, solo necesitamos agregar un parámetro menor a 0;

Filtros personalizados

A pesar de que VueJs nos proporciona muchos filtros poderosos, a veces no es suficiente. Afortunadamente, Vue nos proporciona una manera limpia y sencilla de definir nuestros propios filtros, y luego podemos usar el tubo "|" para completar la filtración.

Para definir un filtro personalizado global, se debe usar el constructor Vue.filter(). Este constructor requiere dos parámetros.

Parámetros del Constructor Vue.filter():

1.filterId: ID del filtro, utilizado como identificador único de su filtro;

2.filter function: función de filtro, que recibe un parámetro y luego formatea el parámetro recibido en el resultado de datos deseado.

En el ejemplo anterior, queremos aplicar un descuento al precio del producto5cómo se realiza un descuento? Es simplemente una función de filtro personalizado que representa aplicar un descuento al precio del producto5descuento; para lograrlo, es necesario completar:

a、usar el constructor Vue.filter() para crear un filtro llamado discount

b、ingresar el precio original del producto, que regresará el precio de descuento después de aplicar un 50% de descuento

El código se ve a continuación:

Vue.filter('discount', function(value) {
  return value * .5;
});
var product = new Vue({
  el: '.product',
  data: {
    products: [
      {name: 'Manzana',price: 25,category: "fruta"}, 
      {name: 'Plátano',price: 15,category: "fruta"}, 
      {name: 'Pera',price: 65,category: "fruta"}, 
      {name: 'BMW',price: 2500,category: "coche"},
      {name: 'Mercedes',price: 10025,category: "coche"}, 
      {name: 'Naranja',price: 15,category: "fruta"}, 
      {name: 'Audi',price: 25,category: "coche"}
    ]
  },
) 

Ahora podemos usar el filtro personalizado de la misma manera que los filtros integrados de Vue.

<ul class="product">
  <li v-for="product in products|filterBy 'fruta' in 'category' |orderBy 'price' 0">
    {{product.name}}-{{product.price|discount | currency}}
  </li>
</ul> 

El código anterior realiza un descuento en el producto5descuento, ¿pero cómo lograr un descuento variable? Debemos agregar un parámetro de valor de descuento al filtro discount y modificar nuestro filtro.

 Vue.filter('discount', function(value, discount) {
  return value * (discount / 100);
}); 

luego llamamos nuevamente a nuestro filtro

 <ul class="product">
  <li v-for="product in products|filterBy 'fruta' in 'category' |orderBy 'price' 0">
    {{product.name}}-{{product.price|discount 25 | currency}}
  </li>
</ul> 

También podemos construir nuestros filtros dentro de nuestra instancia de Vue, lo bueno de esto es que no afectará a otras instancias de Vue que no necesiten este filtro.

/*definido en el ámbito global 
Vue.filter('discount', function(value,discount) {
  return value * ( discount / 100 ) ;
});
*/
var product = new Vue({
  el: '.product',
  data: {
    products: [
      {name: 'Manzana',price: 25,category: "fruta"}, 
      {name: 'Plátano',price: 15,category: "fruta"}, 
      {name: 'Pera',price: 65,category: "fruta"}, 
      {name: 'BMW',price: 2500,category: "coche"},
      {name: 'Mercedes',price: 10025,category: "coche"}, 
      {name: 'Naranja',price: 15,category: "fruta"}, 
      {name: 'Audi',price: 25,category: "coche"}
    ]
  },
  //definido en la instancia
  filters: {
    discount: function(value, discount) {
      return value * (discount / 100);
    }
  }
) 

Las funciones de filtro definidas en el ámbito global se pueden llamar en todos los ejemplos, si se definen en el ámbito de una instancia, se llaman en el ámbito de la instancia.　

Esto es todo el contenido de este artículo, espero que haya sido útil para su aprendizaje y que todos apoyen el tutorial de gritos.

Declaración: El contenido de este artículo se ha obtenido de la red, es propiedad del autor original, el contenido se ha contribuido y subido por los usuarios de Internet, este sitio no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar y proporcionar evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción.