Usage of Vue filters and timestamp conversion issues

1. Quickly recognize the concept:
2. Local filter:
3. Global filter:
4. Extension:
5. Summary:

This article is shared from Huawei Cloud Community "Master Vue filters and timestamp conversion in three minutes", author: Aurora Night. .

1. Quickly recognize the concept:

Hello everyone, Vue's filters are a common knowledge point. Below I will use the example of timestamp conversion to show you how to use filters quickly~

According to the official statement, Vue.js allows you to customize filters, which can be used for some common text formatting. Filters can be used in two places: double curly brace interpolation and v-bind expressions (the latter is supported since 2.1.0+). Filters should be added at the end of a JavaScript expression, indicated by the "pipe" symbol.

Simply put, define a processing function in the filters filter, write the function name after the pipe character “|”, and it will process the customized data before the pipe character “|”, and the customized data will automatically become the parameters of the filter function.

<!-- in double curly braces -->
{{ message | capitalize }}

<!-- In `v-bind` -->
<div v-bind:id="rawId | formatId"></div>

Filters can be mainly divided into local filters and global filters, see the detailed introduction below.

2. Local filter:

1. A local filter is a filter defined in a component's options and is only available to that component. In our general development, the time backend usually only returns a timestamp for the front end to handle by itself. For example, the following defines a filter that converts the timestamp to a date format (note the steps):

<template>
  <div>
    <!-- 4. Render data and set filters-->
    {{ times | conversion }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 1. Simulate a timestamp data times: 1616959086000,
    };
  },
  // 2. Define filters: {
    //3. Define a processing function, the parameter value is the data to be processed conversion: function (value) {
      //Call Date method to process timestamp return new Date(value).toLocaleString();
    },
  },
};
</script>

As a result, the conversion was successful:

2. Not only that, filters can also be connected in series, that is, you can define multiple filters. For example, the following is equivalent to first using the conversion function to process the times data to get the result, and then continuing to use the againChange function to process the previous result to get the final result:

 {{ times | conversion | againChange }}

The basic demonstration is as follows:

<template>
  <div>
    <!-- 5. Add filter-->
    {{ times | conversion | againChange }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 1. Simulate a timestamp data times: 1616959086000,
    };
  },
  // 2. Define filters: {
    //3. Define a processing function, the parameter value is the data to be processed conversion: function (value) {
      //Call Date method to process timestamp return new Date(value).toLocaleString();
    },
    //4. Define another filter and add the words "Time is:" before the data againChange: function (value) {
      return "Time is: " + value;
    },
  },

};
</script>

3. At the same time, filters can also receive parameters. For example, we improve the example in the first point, convert the timestamp into a time format that can be specified, and use the desired time format as the filter parameter. The specific usage is as follows (note the steps):

<template>
  <div>
    <!-- 4. Add filters, pass parameters, and return the time in the specified format-->
    {{ times | conversion("yyyy-MM-dd HH:mm:ss week w") }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 1. Simulate a timestamp data times: 1616959086000,
    };
  },
  // 2. Define filters: {
    //3. Define a processing function, the parameter value is the data to be processed, and format is the incoming parameter conversion: function (value, format) {
      //This conversion method will not be introduced, just take a look, the filter usage is the main var date = new Date(value);
      function addZero(date) {
        if (date < 10) {
          return "0" + date;
        }
        return date;
      }
      let getTime = {
        yyyy: date.getFullYear(),
        yy: date.getFullYear() % 100,
        MM: addZero(date.getMonth() + 1),
        M: date.getMonth() + 1,
        dd: addZero(date.getDate()),
        d: date.getDate(),
        HH: addZero(date.getHours()),
        H: date.getHours(),
        hh: addZero(date.getHours() % 12),
        h: date.getHours() % 12,
        mm: addZero(date.getMinutes()),
        m: date.getMinutes(),
        ss: addZero(date.getSeconds()),
        s: date.getSeconds(),
        w: (function () {
          let a = ["日", "MON", "TUE", "WED", "THUR", "FRI", "SAT"];
          return a[date.getDay()];
        })(),
      };
      for (let i in getTime) {
        format = format.replace(i, getTime[i]);
      }
      return format;
    },
  },

};
</script>

The results are as follows:

3. Global filter:

Since it is called global, it is natural to define the filter globally before creating the Vue instance. After configuration, all components can use it directly. It is usually defined in a custom file. For example, the filter above that processes timestamps is used as follows:

1. Define a filters folder in the src directory, and define a filters.js file in the folder:

2. The filters.js file code is as follows:

const conversion = function (value, format) {
      var date = new Date(value);
      function addZero(date) {
        if (date < 10) {
          return "0" + date;
        }
        return date;
      }
      let getTime = {
        yyyy: date.getFullYear(),
        yy: date.getFullYear() % 100,
        MM: addZero(date.getMonth() + 1),
        M: date.getMonth() + 1,
        dd: addZero(date.getDate()),
        d: date.getDate(),
        HH: addZero(date.getHours()),
        H: date.getHours(),
        hh: addZero(date.getHours() % 12),
        h: date.getHours() % 12,
        mm: addZero(date.getMinutes()),
        m: date.getMinutes(),
        ss: addZero(date.getSeconds()),
        s: date.getSeconds(),
        w: (function () {
          let a = ["日", "MON", "TUE", "WED", "THUR", "FRI", "SAT"];
          return a[date.getDay()];
        })(),
      };
      for (let i in getTime) {
        format = format.replace(i, getTime[i]);
      }
      return format;
    }
  export {
    conversion //Export method here}

3. Introduce global filters in main.js:

The format for setting the global filter is Vue.filter('filter name', corresponding processing function);

import {conversion} from './filters/filters.js'
Vue.filter('conversion', conversion);

4. Can be used directly in a component:

<template>
  <div>
    <!-- 2. Add the filter and pass the parameters to the specified format time-->
    {{ times | conversion("yyyy-MM-dd HH:mm:ss week w") }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 1. Simulate a timestamp data times: 1616959086000,
    };
  },
};
</script>

Same result:

4. Extension:

It can be found that filters are somewhat similar to computed properties in usage, so what is the difference between them?

Filters can pass parameters, but cannot access this. No caching capability. At the same time, filters can be connected in series. Can be set locally and globally. Filters are relatively simple and are only triggered when explicitly called. They are generally used in template rendering.
Computed cannot pass parameters, but can access this, which is for operations on variables. The processing logic behind it is relatively complex, has caching capabilities, and is more universal within components, so it is suitable for complex data conversion, statistics and other scenarios.

5. Summary:

The above is the general content of the filters filter. In general, filters can be divided into local filters and global filters. Local filters are valid within a component, and global filters are valid for every component. Among them, you can set multiple filters and pass parameters to the filters. Generally, filters are applied to some simple data rendering.

This is the end of this article about Vue filters and timestamp conversion. For more information about Vue filters and timestamp conversion, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in: