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

What can I use to save you, my table (Haiyu Blog)

Tables once played a very important role in web p...

XHTML Getting Started Tutorial: XHTML Web Page Image Application

<br />Adding pictures reasonably can make a ...

Detailed explanation of the implementation of shared modules in Angular projects

Table of contents 1. Shared CommonModule 2. Share...

Introduction to the usage of common XHTML tags

There are many tags in XHTML, but only a few are ...

Detailed explanation of group by and having in MySQL

The GROUP BY syntax can group and count the query...

CSS3 transition to implement notification message carousel

Vue version, copy it to the file and use it <t...

Thoughts on copy_{to, from}_user() in the Linux kernel

Table of contents 1. What is copy_{to,from}_user(...

A brief discussion on an efficient algorithm for constructing tree structures in JavaScript

Table of contents introduction Ideas Establish ID...

Docker learning: the specific use of Container containers

Container is another core concept of Docker. Simp...

How to add sudo permissions to a user in Linux environment

sudo configuration file The default configuration...

Brief Analysis of MySQL B-Tree Index

B-Tree Index Different storage engines may also u...

TypeScript installation and use and basic data types

The first step is to install TypeScript globally ...

Introduction to Javascript DOM, nodes and element acquisition

Table of contents DOM node Element node: Text nod...

How to set password for mysql version 5.6 on mac

MySQL can be set when it is installed, but it see...

Understand the difference between BR and P tags through examples

<br />Use of line break tag<br>The lin...