This article example shares the specific code of Vue using filters to format dates for your reference. The specific content is as follows Case RequirementsCase Study 1. View the unfiltered formatted date format Final case effectCodeSet 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:
|
<<: MySQL 5.7.17 installation and configuration tutorial under Linux (Ubuntu)
>>: Use PSSH to batch manage Linux servers
need When querying a field, you need to give the ...
Table of contents 1. Offline installation 2. Onli...
describe Returns the time interval between two da...
Preface 1. Benchmarking is a type of performance ...
Table of contents illustrate 1. Enable Docker rem...
Effect picture: Implementation code: <template...
Searching online for methods to deploy Angular pr...
I reinstalled VMware and Ubuntu, but the command ...
There are two types of dead link formats defined b...
Preface All hardware devices in the Linux system ...
This article uses examples to illustrate the erro...
The following error message appears when installi...
Table of contents Mistake 1: Too many columns of ...
Summarize This article ends here. I hope it can b...
Redis Introduction Redis is completely open sourc...