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

Implementation of Nginx load balancing cluster

(1) Experimental environment youxi1 192.168.5.101...

Detailed explanation of count without filter conditions in MySQL

count(*) accomplish 1. MyISAM: Stores the total n...

Solve the problem of running jupyter notebook on the server

Table of contents The server runs jupyter noteboo...

How to solve the synchronization delay caused by MySQL DDL

Table of contents Preface Solution Tool Introduct...

Example code for configuring monitoring items and aggregated graphics in Zabbix

1. Install Zabbix Agent to monitor the local mach...

Detailed example of clearing tablespace fragmentation in MySQL

Detailed example of clearing tablespace fragmenta...

Getting Started with CSS3 Animation in 10 Minutes

Introduction Animation allows you to easily imple...

Example of how to configure nginx to implement SSL

Environmental Description Server system: Ubuntu 1...

How to generate Hive table creation statement comment script in MySQL metadata

Preface This article mainly introduces the releva...

MySQL 5.7.17 installation and configuration graphic tutorial

The blogger said : I have been writing a series o...

iframe adaptive size implementation code

Page domain relationship: The main page a.html bel...

Javascript uses the integrity attribute for security verification

Table of contents 1. Import files using script ta...

js to realize a simple advertising window

This article shares the specific code of js to im...