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>