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
Preface This experiment prepares two virtual mach...
Designers have their own font library, which allo...
I recently read about vue. I found a single-file ...
Upgrade process: Original system: CentOS7.3 [root...
Table of contents The origin of JSBridge The bidi...
The following situations were discovered during d...
Table of contents Portals Error Boundary Handling...
Table of contents Step 1: Build the framework Ste...
introduction If you are familiar with using JDBC ...
Purchase Certificate You can purchase it from Ali...
1. Understanding the meaning of web standards-Why...
Similar to the code hosting service provided by G...
This article uses examples to describe the creati...
How can we say that we should avoid 404? The reas...
A story about database performance During the int...