SOURCE

<div id="app">
    <h1>在双花括号中使用</h1>
    <p>{{date}}</p>
    <p>{{date | dateString}}</p>
    <p>{{date | dateString('YYYY-MM-DD')}}</p>
    <p>{{date | dateString('HH:MM:SS')}}</p>
    <p>{{date | dateString('HH:MM:SS')}}</p>
    <!--在‘v-bind’中使用 id="2021-01-28 14:01:29 -->
    <div :id="date | dateString"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script>
    // vue过滤器 -格式化时间在创建 Vue 实例之前全局定义过滤器
    Vue.filter('dateString', function(value, format = 'YYYY-MM-DD HH:MM:SS') {
        // 不传值默认为 'YYYY-MM-DD HH:MM:SS'
        return moment(value).format(format);
    })
    const vm = new Vue({
        el: "#app",
        data() {
            return {
                date: new Date()
            }
        }
    })
</script>