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
Table of contents Overview 1. Simple Example 1. U...
Docker is divided into CE and EE. The CE version ...
1. Mental Journey When I was writing the cockpit ...
In Linux system, newly install docker and enter t...
Here is a case study on how to close ads using Ja...
The effect to be achieved: When the mouse is plac...
Port 80 is also configured. First enter the firew...
I recently watched a video of a foreign guy using...
React Lifecycle Two pictures to help you understa...
This article shares with you the graphic tutorial...
Quickly install the tensorflow environment in Doc...
Preface In the previous interview process, when a...
Recently, I have been studying the MySQL database...
Recently, the company is preparing to develop an ...
The cursor size in the input box is inconsistent T...