vue过滤器 - 掘金

过滤数据是我们日常开发中必然会用到的。常见的场景：当我们从后端请求到数据列表时，我们需要对其中符合条件的数据进行筛选、当我们拿到数据，我们希望把英文首字母大写，等等。 js常用的操作方法是filter：

array.filter(function(currentValue,index,arr), thisValue)

filter方法参数值我们一起来看个示例：

const arr = [
	{
        name: 'tom1',
        age: 23
    },
    {
        name: 'tom2',
        age: 42
    },
    {
        name: 'tom3',
        age: 17
    },
    {
        name: 'tom4',
        age: 13
    },
]
const res = arr.filter(item => item.age > 18);
console.log(res);
console.log(arr);

我们通过filter对数组进行过滤，筛选出年龄大于 18岁的数据，结果会返回一个新数组，且不会改变原始数组。结果展示：

在这里插入图片描述

好了，回归正题，我们在vue项目中，可能需要频繁的使用过滤，我们每次都拿到一次数据，进行过滤一次未免显得很冗余，这时就用到了我们vue的内置过滤器。在这里插入图片描述

以上是vue官方对于过滤器的介绍，它通常被用在插值表达式或属性绑定上。过滤器分为两种，一种是单个组件的过滤器，也叫做局部过滤器，一种是vue实例全局的过滤器，它可以被应用在任何地方。过滤器也可以使用多个，会依次执行。例如下例中，会把message的当做参数传入A过滤器进行过滤，A过滤器过滤完的数据返回值会传入B过滤器

{{ message | filterA | filterB }}

局部过滤器使用案例：这是一个公共组件，提供一个msg属性接口供外界传入，当作标题进行展示，但是通常我们需要首字母进行大写，但是往往我们并不能限制到外界传入的数据，所以通过过滤器对于外界传入的值进行过滤处理，针对未传入数据时展示空字符串，传入数据后进行首字母大写转换

<template>
  <div class="hello">
    <h1>{{ msg | capitalize }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props:['msg'],
  data() {
    return {};
  },
  filters: {
    capitalize: function(value) {
      window.console.log("rd: value", value);
      if (!value) return "";
      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1); // 首字母大写
    }
  }
};
</script>

全局过滤器使用案例：在main.js中的Vue上添加全局过滤器，对全部字符进行大写转换（借用上面的案例，上面案例只是对首字母进行大写转换，然后返回值引用全局过滤器对所有字符进行大写转换） main.js：

Vue.filter("upperCase", function(value) {
  if (!value) return "";
  value = value.toString();
  return value.toUpperCase(); // 小写转为大写
});

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

helloworld组件：

<template>
  <div class="hello">
    <h1>{{ msg | capitalize | upperCase }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: ["msg"],
  data() {
    return {};
  },
  filters: {
    capitalize: function(value) {
      window.console.log("rd: value", value);
      if (!value) return "";
      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1); // 首字母大写
    },
  },
};
</script>

当然了，在实际业务中我们可能会经常用到过滤器，希望大家能更加优雅的使用，写出更好的代码。（- 。- 偷偷告诉你个小技巧，可以考虑针对时间戳格式化写成全局过滤器，就不用我们再每次都费心格式化了）

好了，如有问题，请指出，接受批评。

在这里插入图片描述