Agregar filtros en VueJS

Un filtro es una función de JavaScript simple que se utiliza para cambiar la salida de datos al navegador. Los filtros en Vue.JS no cambian los datos directamente donde los almacenamos, solo aplican formato a nuestros datos. Los datos siguen siendo los mismos, solo se cambia la salida de datos a un navegador. Vue.JS no brinda estos filtros de forma predeterminada, por lo que debemos crear estos filtros. Con Vue.JS , podemos usar filtros de dos maneras diferentes, es decir, filtro global y filtro local . El filtro global proporciona acceso a todos los componentes, mientras que el filtro local solo nos permite usar nuestro filtro dentro del componente que se definió.

Requisitos previos: Conceptos básicos de Vue.JS

Enfoque: a continuación, se describen todos los pasos en orden para crear filtros en Vue.JS.

• Paso 1:  en primer lugar, si queremos un filtro global, lo registramos mediante el método Vue.filter()
• Paso 2: Ahora agregamos el método Vue.filter() en el archivo index.js. Esta función de filtro toma un valor como argumento y luego devuelve el filtro o el valor transformado.

Vue.filter('uppercase', function(value));

• Paso 3: Vue.JS ejecutará esta función cada vez que se aplique este filtro a algo. Esta función recibirá automáticamente un argumento de entrada y ese es el valor. Vue.JS pasará este valor a esta función automáticamente y este será el valor sobre el que aplicaremos este filtro.
• Paso 4: Ahora devolvemos el filtro o el valor transformado.

Vue.filter('uppercase', function (value) {
  return value.toUpperCase();
});

• Paso 5: Ahora vaya a su plantilla y simplemente agregue el filtro agregando un símbolo de tubería y luego el nombre del filtro. La sintaxis para aplicar un filtro es

{{ title | filtername }}

A continuación se muestra un programa de ejemplo para ilustrar el enfoque anterior:

Filtro global: el alcance del filtro global se encuentra en toda nuestra aplicación Vue.

Ejemplo 1 : en el siguiente programa, invertiremos una string dada usando un filtro global.

principal.js

// GLOBAL FILTER
// In this example, we are 
// creating a filter which
// reverses the given string
import Vue from "vue";
  
// Importing App.vue
import App from "./App.vue";
  
// Declaration
Vue.filter("reverseString", function (value) {
    return value.split("").reverse().join("");
});
  
new Vue({
    render: (h) => h(App)
}).$mount("#app");

aplicación.vue

<!--Template--> 
<template>
  <div id="app">
      
    <!--Applying filter-->
    <h1>{{ name | reverseString }}</h1>
  </div>
</template>
  
<script>
export default {
  data: function () {
    return {
      name: "GEEKSFORGEEKS",
    };
  },
};
</script>

Producción

Filtro local: el alcance del filtro local está dentro de un componente.

Ejemplo 2: en el siguiente programa, cambiaremos la string dada a mayúsculas usando el filtro local.

aplicación.vue

<!-- Local filter in VueJS -->
<!-- Template -->
<template>
  <div>
    
    <!-- Applying Uppercase filter -->
    <h1>{{ name| uppercase }}</h1>
  </div>
</template>
  
<!-- Filter defined locally -->
<script>
export default {
  data: function() {
    return {
      name: "geeksforgeeks"
    };
  },
  filters: {
    uppercase: function(value) {
      return value.toUpperCase();
    }
  }
};
</script>

Producción