Vue_自定义过滤器

LRight-T

于 2020-09-28 15:35:06 发布

阅读量81

点赞数

文章标签：过滤器 filter vue

本文链接：https://blog.csdn.net/qq_44604924/article/details/108850501

版权

Vue 过滤器时间格式化 moment.js 自定义过滤器

关键词由CSDN通过智能技术生成

过滤器：对数据进行筛选和过滤，可被用于一些常见的文本格式化，现使用自定义过滤器对时间进行格式化，使用双花括号插值来调用。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.21.0/moment.js"></script>
    <script type="text/javascript">
    /*
        自定义过滤器
    */
        window.onload = function(){
            Vue.filter('dateString',function(value,format= 'YYYY-MM-DD HH:mm:ss'){//ES6中的形参默认值，如果没传参则默认是它
                return moment(value).format( format);
                // return moment(value).format( format || 'YYYY-MM-DD HH:mm:ss');
            });//函数对象
            var app = new Vue({
                el:"#app",
               data() {
                   return {
                       date:new Date(),
                   }
               }, 
            });
        };
    </script>
</head>
<body>
    <div id="app">
        <p>{{date}}</p>
        <p>完整的：{{date | dateString}}</p><!--会把前面的传给后面的-->
        <p>年月日：{{date | dateString('YYYY-MM-DD')}}</p>
        <p>时分秒：{{date | dateString('HH:mm:ss')}}</p>
    </div>
</body>