filter过滤器的使用

在vue项目中我们经常需要对数据进行处理，比如需要将时间戳处理成时间节点，或者将时间节点处理成时间戳等等。

在项目中可以注册全局过滤器，也可以在组件中注册过滤器。

1、 注册全局过滤器

ps：注册全局过滤器，必须在new Vue实例之前注册。Vue.filter()

Vue.filter(名称，function(value){// 业务逻辑})

// 转为大小字母
Vue.filter('strToUpperCase', function (str) {
  if (!str) {
    return str;
  }
  return str.toString().toUpperCase();
});
// 转为小写字母
Vue.filter('strToLowerCase', function (str) {
  if (!str) {
    return str;
  }
  return str.toString().toLowerCase();
});
// vue实例
new Vue({
  render: h => h(App),
  store,
  router
}).$mount('#app');

 

 2、组件中注册过滤器

<template>
  <div>
    <input type="text" v-model.number="val" />
    <div>输入框的值（小于10在前面补0）：{{val|addZero}}</div>
    <div :title="val|addZero">鼠标悬浮在我上面显示的是输入框的值补0</div>

    <div>{{'Hello'|addWorld}}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      val: undefined
    };
  },
  filters: {
    // 数字补0
    addZero(val) {
      if (isNaN(val)) {
        return val;
      } else {
        if (val < 10) {
          return "0" + val;
        } else {
          return val;
        }
      }
    },
    // Hello后面加 World
    addWorld(str) {
      if (str === "Hello") {
        return str + " World!";
      }
    }
  },
  created() {},
  methods: {}
};
</script>
<style scoped>
</style>

 过滤器中的第一个参数是 “|” 前的值，过滤器中不能获取 this，因为当我们需要传参的时候，可以在使用中去传参，也可以过滤器叠在一起使用。

<template>
  <div>
    <!-- 过滤器也是可以传参数的 -->
    <div>{{name}}的英文是：{{name|getEnglish(list)}}</div>

    <!-- 过滤器叠在一起使用，name作为filter1的第一个参数，filter1返回的值作为filter2的第一个参数，最后显示filter2的返回值 -->
    <div>叠加显示：{{name|filter1|filter2}}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "苹果",
      list: [
        { name: "苹果", english: "apple" },
        { name: "香蕉", english: "banner" },
        { name: "橘子", english: "orange" }
      ]
    };
  },
  filters: {
    getEnglish(val, list) {
      // 过滤器中不能获得vue实例
      console.log("this:", this); // undefined
      var eng = "";
      list.forEach(one => {
        if (one.name === val) {
          eng = one.english;
        }
      });
      return eng;
    },
    filter1(val) {
      return val + "过滤器1";
    },
    filter2(val) {
      return val + "过滤器2";
    }
  },
  created() {},
  methods: {}
};
</script>
<style scoped>
</style>

总结：

1. 全局过滤器注册必须在new Vue实例之前，Vue.filter(名称，function（val）{// 业务逻辑})

2. 组件中注册过滤器使用，filters:{名称1：function（val）{}，名称2：function（val）{}}，注意：组件中注册的单词是“f-i-l-t-e-r-s”，全局注册没有s。

3. 过滤器中不能获得 this，但使用时可以传参，也可以叠加使用过滤器，如：<div>{{name|filter1(list)|filter2}}</div>