Vue.js -- Resumo do uso do filtro

Filtros são simples funções que, através de dados de entrada, tratam e retornam um resultado de dados. O Vue possui muitos filtros convenientes, geralmente usando o sinal de管道 "|", por exemplo:

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

Filtro uppercase: filtro que converte a string de entrada em letras maiúsculas.

VueJs permite chamadas encadeadas de filtros, para simplificar, é a saída de um filtro que se torna a entrada do próximo filtro, então novamente filtrada. Em seguida, podemos imaginar um exemplo mais simples, que usa o filterBy do Vue + Filtro orderBy para filtrar todos os produtos products. Os produtos filtrados pertencem à categoria de produtos frutas.

Filtro filterBy: o valor do filtro deve ser um array, filterBy + Condição de filtro. A condição de filtro é: 'string || function'+ em 'nomeDaOpção'

Filtro orderBy: o valor do filtro deve ser um array, orderBy + Condição de filtro. A condição de filtro é: 'string || array ||function' + 'order ≥ 0 para ascendente || order < 0 para descendente'

A seguir, podemos ver o seguinte exemplo: temos um array de produtos products, queremos percorrer este array e impressão deles em uma lista, isso usa v-for é fácil de implementar.

<ul class="product">
  <li v-for="product in products|filterBy 'frutas' in 'categoria' |orderBy 'preço' 1">
    {{product.name}}-{{product.price | currency}}
  </li>
</ul> 

No exemplo acima, usamos o filtro filterBy para filtrar a lista contendo a palavra-chave 'frutas' na 'categoria', retornando uma lista que contém apenas a palavra-chave 'frutas'. O filtro orderBy faz uma ordenação ascendente com base no preço; se você quiser uma ordenação descendente, basta adicionar um parâmetro menor que 0;

Filtros Personalizados

Embora o Vue.js nos forneça muitos filtros poderosos, às vezes não é suficiente. Felizmente, o Vue nos oferece uma maneira limpa e concisa de definir nossos próprios filtros, que podemos usar com o管道 "|" para completar a filtragem.

Para definir um filtro personalizado global, é necessário usar o construtor Vue.filter(). Este construtor requer dois parâmetros.

Parâmetros do Construtor Vue.filter():

1.filterId: ID do filtro, usado como identificador único do seu filtro;

2.filter function: função de filtro, que recebe um parâmetro e, em seguida, formata o parâmetro recebido em um resultado de dados desejado.

No exemplo acima, queremos implementar o desconto no preço do produto5Como fazer um desconto? É basicamente implementar um filtro personalizado que representa a aplicação de um desconto no preço do produto5desconto; para implementá-lo, é necessário completar:

a、usar o construtor Vue.filter() para criar um filtro chamado discount

b、informar o preço original do produto, retornando o preço de desconto de 50%

O código está abaixo:

Vue.filter('discount', function(value) {
  return value * .5;
});
var product = new Vue({
  el: '.product',
  data: {
    products: [
      {name: 'Maçã',price: 25,category: "fruta"}, 
      {name: 'Banana',price: 15,category: "fruta"}, 
      {name: 'Pera',price: 65,category: "fruta"}, 
      {name: 'BMW',price: 2500,category: "carro"},
      {name: 'Benz',price: 10025,category: "carro"}, 
      {name: 'Citrus',price: 15,category: "fruta"}, 
      {name: 'Audi',price: 25,category: "carro"}
    ]
  },
) 

Agora você pode usar o filtro personalizado da mesma forma que os filtros integrados do Vue.

<ul class="product">
  <li v-for="product in products|filterBy 'frutas' in 'categoria' |orderBy 'preço' 0">
    {{product.name}}-{{product.price|discount | currency}}
  </li>
</ul> 

O código acima realiza o desconto do produto5desconto, mas e se quisermos aplicar um desconto qualquer? Deveríamos adicionar um parâmetro de valor de desconto no filtro discount e modificar nosso filtro.

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

então recarregue nosso filtro

 <ul class="product">
  <li v-for="product in products|filterBy 'frutas' in 'categoria' |orderBy 'preço' 0">
    {{product.name}}-{{product.price|discount 25 | currency}}
  </li>
</ul> 

Também podemos construir nossos filtros dentro de nossa instância Vue, a vantagem disso é que isso não afetará outras instâncias Vue que não precisam usar esse filtro.

/*definido globalmente 
Vue.filter('discount', function(value,discount) {
  return value * ( discount / 100 ) ;
});
*/
var product = new Vue({
  el: '.product',
  data: {
    products: [
      {name: 'Maçã',price: 25,category: "fruta"}, 
      {name: 'Banana',price: 15,category: "fruta"}, 
      {name: 'Pera',price: 65,category: "fruta"}, 
      {name: 'BMW',price: 2500,category: "carro"},
      {name: 'Benz',price: 10025,category: "carro"}, 
      {name: 'Citrus',price: 15,category: "fruta"}, 
      {name: 'Audi',price: 25,category: "carro"}
    ]
  },
  //personalizado no exemplo
  filters: {
    discount: function(value, discount) {
      return value * (discount / 100);
    }
  }
) 

Os filtros definidos globalmente podem ser chamados em todos os exemplos, se definidos no exemplo, chamados no exemplo.　

Isso é tudo o que há no artigo, espero que ajude na aprendizagem de todos e que todos apoiem o tutorial de gritaria.

Declaração: O conteúdo deste artigo é extraído da internet, pertence ao respectivo proprietário, o conteúdo é contribuído e carregado voluntariamente pelos usuários da internet, este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidades legais relacionadas. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie um e-mail para: notice#w3Avisos: O conteúdo deste artigo é extraído da internet, pertence ao respectivo proprietário, o conteúdo é contribuído e carregado voluntariamente pelos usuários da internet, este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidades legais relacionadas. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie um e-mail para: notice#w