在 VueJS 中添加过滤器

过滤器是一个简单的 JavaScript函数，用于更改数据到浏览器的输出。 Vue.JS中的过滤器不会直接更改我们存储它们的数据，它只会对我们的数据应用格式。数据保持不变，只是数据到浏览器的输出发生了变化。 Vue.JS 默认是不给这些过滤器的，所以我们要自己做这些过滤器。使用 Vue.JS，我们可以通过两种不同的方式使用过滤器，即全局过滤器和本地过滤器。全局过滤器提供对所有组件的访问，而本地过滤器仅允许我们在定义的组件内使用过滤器。

先决条件： Vue.JS 基础

方法：下面按顺序描述了在 Vue.JS 中创建过滤器的所有步骤。

• 步骤 1：首先如果我们想要一个全局过滤器，我们通过 Vue.filter() 方法注册它
• 第 2 步：现在我们在 index.js 文件中添加 Vue.filter() 方法。此过滤器函数将值作为参数，然后返回过滤器或转换后的值。

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

• 第 3 步：每当将此过滤器应用于某物时，Vue.JS 都会执行此函数。此函数将自动接收一个输入一个参数，这就是 value 。 Vue.JS 会自动将此值传递给此函数，这将是我们应用此过滤器的值。
• 第 4 步：现在我们返回过滤器或转换后的值。

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

• 第 5 步：现在转到您的模板，只需添加一个管道符号，然后添加过滤器的名称即可添加过滤器。应用过滤器的语法是

{{ title | filtername }}

下面是一个示例程序来说明上述方法：

全局过滤器：全局过滤器的范围遍及我们的 Vue 应用程序。

示例 1 ：在下面的程序中，我们将使用全局过滤器反转给定的字符串。

main.js

Javascript

// 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");

应用程序.vue

HTML

 

  

export default {
  data: function () {
    return {
      name: "GEEKSFORGEEKS",
    };
  },
};

输出

本地过滤器：本地过滤器的范围在一个组件内。

示例 2：在下面的程序中，我们将使用本地过滤器将给定的字符串更改为大写。

应用程序.vue

Javascript

  


export default {
  data: function() {
    return {
      name: "geeksforgeeks"
    };
  },
  filters: {
    uppercase: function(value) {
      return value.toUpperCase();
    }
  }
};

输出