Vue uses filters to format dates

Vue uses filters to format dates

This article example shares the specific code of Vue using filters to format dates for your reference. The specific content is as follows

Case Requirements

Case Study

1. View the unfiltered formatted date format
2. Set the template function format to receive date value and date format
3. Concatenate dates according to date format and return values
4. Display the spliced ​​date on the page

Final case effect

Code

Set the date display format

<div id="app">
    <div>{{date }}</div>
    <div>{{date | format('yyyy-MM-dd')}}</div>
    <div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div>
    <div>{{date | format('yyyy-MM-dd hh:mm:ss:S')}}</div>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
  <script type="text/javascript">
    // Vue.filter('format', function (value, arg) {
    // // console.log(arg);
    // if (arg == 'yyyy-MM-dd') {
    // var ret = '';
    // ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
    // return ret;
    // }
    // })
    Vue.filter('format', function (value, arg) {
      function dateFormat(date, format) {
        if (typeof date === "string") {
          var mts = date.match(/(\/Date\((\d +)\)\/)/);
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
          }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
          return "";
        }
        var map = {
          "M": date.getMonth() + 1, //month "d": date.getDate(), //day "h": date.getHours(), //hours "m": date.getMinutes(), //minutes "s": date.getSeconds(), //seconds "q": Math.floor((date.getMonth() + 3) / 3), //quarter "S": date.getMilliseconds() //milliseconds };
        format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
          var v = map[t];
          if (v != undefined) {
            if (all.length > 1) {
              v = '0' + v;
              v = v.substr(v.length - 2);
            }
            return v;
          } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
          }
          return all;
        });
        return format;
      }
      return dateFormat(value, arg);
    })
    var vm = new Vue({
      el: "#app",
      data: {
        date: new Date(),
      },

    });
</script>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • How to use vue filter
  • A brief introduction to Vue filters, lifecycle functions and vue-resource
  • Vue3 does not support Filters
  • Steps to encapsulate global filters in Vue
  • Vue filter filter, and its use in table
  • Vue code details of encapsulating multiple filters into one file
  • Vue implements data formatting through filters
  • Case analysis of date formatting using vue filters
  • Detailed explanation of the use scenarios of Vue series filters
  • Filters and time formatting issues in Vue
  • How to use the filter vue.filters
  • The reason why vue3 removes filters

<<:  MySQL 5.7.17 installation and configuration tutorial under Linux (Ubuntu)

>>:  Use PSSH to batch manage Linux servers

Recommend

Detailed explanation of Angular component projection

Table of contents Overview 1. Simple Example 1. U...

Detailed installation tutorial of Docker under CentOS

Docker is divided into CE and EE. The CE version ...

CSS3 implementation example of rotating only the background image 180 degrees

1. Mental Journey When I was writing the cockpit ...

Solution to the docker command exception "permission denied"

In Linux system, newly install docker and enter t...

Javascript to achieve the effect of closing advertisements

Here is a case study on how to close ads using Ja...

JavaScript realizes magnifying glass special effects

The effect to be achieved: When the mouse is plac...

How to configure Linux firewall and open ports 80 and 3306

Port 80 is also configured. First enter the firew...

Detailed explanation of CSS3 to achieve responsive accordion effect

I recently watched a video of a foreign guy using...

Interviewers often ask questions about React's life cycle

React Lifecycle Two pictures to help you understa...

How to quickly install tensorflow environment in Docker

Quickly install the tensorflow environment in Doc...

In-depth analysis of MySQL execution plans

Preface In the previous interview process, when a...

How to use uni-app to display buttons and search boxes in the top navigation bar

Recently, the company is preparing to develop an ...

Solution to inconsistent display of cursor size in input box

The cursor size in the input box is inconsistent T...