Vueは、フィルターの使用を実装して日付ケースをフォーマットします

ケース要件

フィルタを使用して日付をフォーマットする

ケースの説明

1. フィルタリングされていないフォーマットされた日付フォーマットを表示する
2. 日付値と日付形式を受け取るようにテンプレート関数形式を設定します
3. 日付形式に従って日付を連結し、値を返します
4. スプライスされた日付をページに表示します

最終的なケース効果

コード

日付の表示形式を設定する

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

セルフモチベーション

他人の功績の羨望と退屈なため息だけにとらわれず、自分の理想のために戦う努力をしないと、心の中の巨人は永遠に眠ります。したがって、ポジティブマインドだけが私の心の中で眠っている巨人を目覚めさせ、パッシブからアクティブへ、そしてパッシブから成功へと移行することを可能にします！