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

How to assign default values ​​to fields when querying MySQL

need When querying a field, you need to give the ...

Docker-compose installation yml file configuration method

Table of contents 1. Offline installation 2. Onli...

How to use MySQL DATEDIFF function to get the time interval between two dates

describe Returns the time interval between two da...

Analysis of Sysbench's benchmarking process for MySQL

Preface 1. Benchmarking is a type of performance ...

IDEA uses the Docker plug-in (novice tutorial)

Table of contents illustrate 1. Enable Docker rem...

The pitfalls of deploying Angular projects in Nginx

Searching online for methods to deploy Angular pr...

How to change the terminal to a beautiful command line prompt in Ubuntu 18

I reinstalled VMware and Ubuntu, but the command ...

How to create Baidu dead link file

There are two types of dead link formats defined b...

An article to understand Linux disks and disk partitions

Preface All hardware devices in the Linux system ...

Summary of common MySQL table design errors

Table of contents Mistake 1: Too many columns of ...

Detailed explanation of Vue plugin

Summarize This article ends here. I hope it can b...

Detailed explanation of how to implement secondary cache with MySQL and Redis

Redis Introduction Redis is completely open sourc...