Usage of Vue filters and timestamp conversion issues

Usage of Vue filters and timestamp conversion issues

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:
  • Detailed explanation of VUE's data proxy and events
  • A brief discussion on the principle of Vue's two-way event binding v-model
  • Detailed explanation of Vue dynamic components and global event binding summary
  • Detailed explanation of Vue filter implementation and application scenarios
  • Detailed explanation of Vue's data and event binding and filter filters

<<:  Problems and solutions of error 08001 when linking to MySQL in IDEA and no table display after successful connection

>>:  Linux ssh server configuration code example

Recommend

Comparison of 5 CSS scrolling ceiling implementation methods (performance upgrade version)

Preview of revised version This article was writt...

Solve the mysql user deletion bug

When the author was using MySQL to add a user, he...

The perfect solution for MYSQL5.7.24 installation without data directory and my-default.ini and service failure to start

MySQL official website download address: https://...

Practice using Golang to play with Docker API

Table of contents Installing the SDK Managing loc...

Exploration and correction of the weird behavior of parseInt() in js

Background: I wonder if you have noticed that if ...

RGBA alpha transparency conversion calculation table

Conversion between rgba and filter values ​​under...

Summary of javascript date tools

let Utils = { /** * Is it the year of death? * @r...

Summary of common functions of PostgreSQL regular expressions

Summary of common functions of PostgreSQL regular...

How to regularly clean up docker private server images

Using CI to build docker images for release has g...

How to implement responsive layout in vue-cli

When we are doing front-end development, we will ...

Implementation of Docker cross-host network (overlay)

1. Docker cross-host communication Docker cross-h...

Nginx local directory mapping implementation code example

Sometimes you need to access some static resource...

Detailed explanation of MySQL 5.7 MGR single master determination master node method

Our bank's MGR will be launched at the end of...

Configure Mysql master-slave service implementation example

Configure Mysql master-slave service implementati...

Example of using negative margin to achieve average layout in CSS

For evenly distributed layouts, we generally use ...