Vue中的过滤器(Filter)详解

什么是过滤器(Filter)?

过滤器(Filter)是Vue.js提供的一种可复用功能的方法，用于对数据的格式化处理。

在Vue.js的模板语法中, 可以用管道符（|）来应用过滤器。管道符前面是要过滤的数据项，管道符后面是过滤器的名称。

例如:

<div>{{message | capitalize}}</div>

上面的代码中，我们使用了capitalize过滤器，用于将message数据项的首字母大写。当message数据项的值为hello world时，页面上显示的文字是Hello world。

如何定义过滤器(Filter)?

在Vue.js中，定义过滤器的方式非常简单，只需使用Vue.filter()方法即可。

// 自定义一个名为"capitalize"的过滤器
Vue.filter('capitalize', function(value) {
  // 代码实现，将value的首字母转换为大写
})

上面的代码中，我们使用Vue.filter()方法来定义了一个名为capitalize的过滤器，该过滤器的功能是将数据项的字符串首字母转换为大写。

过滤器(Filter)的实际应用

下面我们来看一个具体的过滤器实际应用的例子：

假设我们有一个用户列表，每个用户对象包含了一个name属性和一个age属性，我们想对用户列表数据进行格式化显示。

<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">{{user.name}} ({{user.age | getAge}} 岁)</li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        users: [
          { id: 1, name: '张三', age: '1984-04-10' },
          { id: 2, name: '李四', age: '1986-05-22' },
          { id: 3, name: '王五', age: '1990-06-26' },
        ]
      }
    },
    filters: {
      // 定义一个名为"getAge"的过滤器
      getAge: function(value) {
        // 获取当前时间戳
        let now = Date.parse(new Date());
        // 获取生日时间戳
        let birthday = Date.parse(new Date(value));
        // 得到年龄，并返回
        let age = parseInt((now - birthday) / (1000 * 60 * 60 * 24 * 365));
        return age;
      }
    }
  }
</script>

上面的代码中，我们使用了内置的date过滤器和自定义的getAge过滤器，最终呈现的结果是用户列表，名称后跟着用户年龄。

另一个过滤器(Filter)的实际应用

再来看一个具体实例：比如，我们需要在Vue中动态渲染HTML内容，但是我们不希望前端用户的HTML代码被污染，所以需要对用户输入的内容进行一定的过滤，比如只允许用户输入a、p、div标签。

<template>
  <div v-html="message | safeHTML"></div>
</template>

<script>
  export default {
    data() {
      return { message: '<a href="#">Link</a>' };
    },
    filters: {
      safeHTML: function(value) {
        let div = document.createElement('div');
        div.innerHTML = value;
        let allowedTags = ['a', 'p', 'div'];
        div.querySelectorAll('*').forEach(function(node) {
          if (allowedTags.indexOf(node.nodeName.toLowerCase()) === -1) {
            node.parentNode.removeChild(node);
          }
        });
        return div.innerHTML;
      }
    }
  }
</script>

上面的代码中，我们使用了v-html指令，将数据项message的值渲染成HTML内容，然后通过safeHTML过滤器筛选，使其只能包含指定标签。在上面的例子中，我们只允许用户输入<a>、<p>、<div>标签。