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

This article will show you the principle of MySQL master-slave synchronization

Table of contents Brief Analysis of MySQL Master-...

Detailed explanation of Linux one-line command to process batch files

Preface The best method may not be the one you ca...

How to use filters to implement monitoring in Zabbix

Recently, when I was working on monitoring equipm...

Vue implements paging function

This article example shares the specific code of ...

New settings for text and fonts in CSS3

Text Shadow text-shadow: horizontal offset vertic...

CSS code to distinguish ie8/ie9/ie10/ie11 chrome firefox

Website compatibility debugging is really annoyin...

Vue uses ECharts to implement line charts and pie charts

When developing a backend management project, it ...

A detailed introduction to deploying RabbitMQ environment with docker

Prerequisites: Docker is already installed 1. Fin...

How to ensure transaction characteristics of MySQL InnoDB?

Preface If someone asks you "What are the ch...

React's component collaborative use implementation

Table of contents Nesting Parent-child component ...

Lambda expression principles and examples

Lambda Expressions Lambda expressions, also known...