Vue过滤器

过滤器分为两种，一种为单个组件的过滤器，也叫做局部过滤器，一种vue实例全局过

滤器，他可以被应用到任何地方。过滤器也可以使用多个，会依次执行。例如下例中，

会把message的当做参数传入过滤器A中进行过滤，过滤器A过滤完的数据会返回值传

入过滤器B

{{message | filterA | filterB}}

局部过滤器

        1).在组件或vue实例里面使用。

        2).定义的局部过滤器，只能在自己的组件内部使用

这是一个公共组件，提过一个msg的属性接口供外界传入，当做标题进行展示，但是通

常我们需要首字母进行大写，但是往往我们并不能限制到外界传入的数据，所以通过过

滤器对于外界传入的值进行过滤处理，针对未传入数据时展示空字符串，传入数据后进

行首字母大写转换，如以下局部实例

局部过滤器实例：

<template>
  <div class="ABC">
    <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>

 全局过滤器

        1). 全局过滤器可以再任何地方使用。

        2).过滤器只能在v-bind和{{}}中使用。

Vue.filter('list',function(da){
    
})

在main.js中的Vue上添加全局过滤器，对全部字符进行大写转换（上面案例只是对首字

母进行大写转换，然后返回值引用全局过滤器对所有字符进行大写转换）

代码如下：

全局过滤器实例：

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

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

<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>

  这就是一个简单vue过滤器

  谢谢支持！！！