Vue学习（10）过滤器

概述

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。

DEMO

<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/1.0.0/moment.min.js"></script>
<div id="app">
    <p>当前时间（时间戳）：<b>{{nowtime}}</b></p>
    <p>当前时间（年月日）：<b>{{nowtime | dateFormat('YYYY-MM-DD')}}</b></p>
    <p>当前时间（时分秒）：<b>{{nowtime | dateFormat('HH:mm:ss')}}</b></p>
</div>
<script>
    //在创建 Vue 实例之前全局定义过滤器
    Vue.filter('dateFormat', (value,formatStr) => {
        return moment(value).format(formatStr);
    })
    new Vue({
        el: '#app',
        data: {
            nowtime: Date.now()
        },
    })
</script>

效果：