Vue implements the use of filters to format the date case

Case requirements

Use filters to format dates

Case explanation

1. View unfiltered formatted date format
2. Set template function format to receive date value and date format
3. Concatenate the date according to the date format and return the value
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, //月份
                    "d": date.getDate(), //日
                    "h": date.getHours(), //小时
                    "m": date.getMinutes(), //分
                    "s": date.getSeconds(), //秒
                    "q": Math.floor((date.getMonth() + 3) / 3), //季度
                    "S": date.getMilliseconds() //毫秒

                };
                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>

Self-motivation

If I am only confined to the envy of others' achievements and sighing boring sighs, and never strive for my own ideals, then the giant in my heart will sleep forever. Therefore, only a positive mind can awaken the sleeping giant in my heart, and enable me to move from passive to active, and from passive to successful!