vueカスタムフィルタ、時間文字列のフォーマット


Vue.jsでは、フィルタをカスタマイズできます.一般的なテキストフォーマットで使用できます.フィルタは、2つの場所で使用できます.カッコ補間とv-bind式(後者は2.1.0+からサポートされます).JavaScript式の末尾にフィルタを追加する必要があります.

{{ time | formatTime('yyyy-MM-dd')}}


在一个组件的选项中定义本地的过滤器:

filters: {
            formatTime: function (date, fmt) {
                var date = new Date(date);
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                }
                var o = {
                    'M+': date.getMonth() + 1,
                    'd+': date.getDate(),
                    'h+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds()
                };
                for (var k in o) {
                    if (new RegExp('('+k+')').test(fmt)) {
                        var str = o[k] + '';
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : ('00' + str).substr(str.length));
                    }
                }
                return fmt;
            }
        }

Vueインスタンスを作成する前に、フィルタをグローバルに定義します.
Vue.filter('formatTime',  function (date, fmt) {
                var date = new Date(date);
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                }
                var o = {
                    'M+': date.getMonth() + 1,
                    'd+': date.getDate(),
                    'h+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds()
                };
                for (var k in o) {
                    if (new RegExp('('+k+')').test(fmt)) {
                        var str = o[k] + '';
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : ('00' + str).substr(str.length));
                    }
                }
                return fmt;
            }) 

new Vue({ // ... })

グローバルフィルタとローカルフィルタの名前を変更すると、ローカルフィルタが使用されます.
 
参照先:
https://cn.vuejs.org/v2/guide/filters.html
https://blog.csdn.net/hr541659660/article/details/94622328