Usually in the development, there are many places that need to use the filter, such as unit conversion, digital dot, text formatting, etc., such as: 

Vue.filter('toThousandFilter'.function (value) {
  if(! value)return ' '
  value = value.toString()
  return .replace(str.indexOf('. ') > 1? /(\d)(? =(\d{3})+\.) /g : /(\d)(? = (? :\d{3})+$)/g,'$1')})Copy the code
Effect:

30000 => 30,000
Of course, this is just a general usage, so there’s nothing to say. Here is a scenario I encountered in development that required a series filter.

Suppose you want to get a list of orders where the status field for each item represents the order status: 

          {
            id: ' ',
            order_num: '123456789', goodList: [ ... ] , address: { ... }, status: 1 // 1 to be paid 2 to be shipped 3 to be received}Copy the code
So when we get this data in v-for, this is what we’re going to do: 

<template> <! -... --> <span class="order_status">{{ orderItem.status | getOrderStatus }}</span> <! -... --> </template> <script>export default {
    // ...
    filters: {
        getOrderStatus(status) {
            switch (status.toString()) {
                case '1':
                    return 'To be paid';
                case '1':
                    return 'To be shipped';
                case '1':
                    return 'To be received';
                default:
                    return ' '; }}} //... } </script> <style scopedtype="scss">
    // ...
    .order_status {
        font-size: 14px;
    }
    // ...
</style>Copy the code
In this way, status 1, 2, 3 becomes payment to be paid, delivery to be received. There’s nothing wrong with that. However, the requirement comes in that the status text should be red when the order is not paid. Is when the status is waiting for payment, the text should be red!

This problem has been troubled for a period of time, with a variety of methods, although also to achieve the demand, but ultimately not too elegant. It was only when I was looking through the VUE document recently that I remembered the use of series filter, which can perfectly solve this need. 

<template> <! -... --> <span class="order_status" :class="orderItem.status | getOrderStatus | getOrderStatusClass">{{ orderItem.status | getOrderStatus }}</span> <! -... --> </template> <script>export default {
    // ...
    filters: {
        getOrderStatus(status) {
            switch (status.toString()) {
                case '1':
                    return 'To be paid';
                case '1':
                    return 'To be shipped';
                case '1':
                    return 'To be received';
                default:
                    return ' ';
            }
        },
        getOrderStatusClass(status) {
            if (status === 'To be paid') {
                return 'not-pay'
            }
            return ' '}} / /... } </script> <style scopedtype="scss"> / /... .order_status { font-size: 14px; &.not-pay { color: red; }} / /... </style>Copy the code
It’s that simple.


Here are a few other things to note about filters:

  • Filter must be a pure function
  • There is no vUE instance in the filter, vUE does this on purpose
  • Global filters are registered with vue.filter () and locally with filters: {}.
  • Call the filter method in this.$options.filters.xxx