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

Font Treasure House 50 exquisite free English font resources Part 1

Designers have their own font library, which allo...

Implementation of Vue single file component

I recently read about vue. I found a single-file ...

CentOS7 upgrade kernel kernel5.0 version

Upgrade process: Original system: CentOS7.3 [root...

A Preliminary Study on JSBridge in Javascript

Table of contents The origin of JSBridge The bidi...

Table setting background image cannot be 100% displayed solution

The following situations were discovered during d...

Implementation of Portals and Error Boundary Handling in React

Table of contents Portals Error Boundary Handling...

Teach you to implement a simple promise step by step

Table of contents Step 1: Build the framework Ste...

How to upgrade https under Nginx

Purchase Certificate You can purchase it from Ali...

Html/Css (the first must-read guide for beginners)

1. Understanding the meaning of web standards-Why...

Analysis of the operating principle and implementation process of Docker Hub

Similar to the code hosting service provided by G...

MySQL triggers: creating and using triggers

This article uses examples to describe the creati...

17 404 Pages You'll Want to Experience

How can we say that we should avoid 404? The reas...

Explanation of factors affecting database performance in MySQL

A story about database performance During the int...