filter 不改变原数据改变展现形式

有时我们需要拿到数据做相应的格式化展现在页面上，但是不能改变原数据，仅改变展示方式，此时用到filter过滤

当全局过滤器和局部过滤器重名时，会采用局部过滤器。

    <template>
        <h1>{{nowTime|transHour}}</h1>
        <date-picker type="date" placeholder="Select date" v-model="nowTime"></date-picker>
        <input type="text" v-color="'blue'">
    </template>


//全局过滤器
Vue.filter('transTime', function (val) {
    let Year = val.getFullYear();
    let month = val.getMonth() + 1;
    let day = val.getDate();
    var result = Year + ' - ' + month + ' - ' + day;
    return result;
});
//全局指令
Vue.directive('color', {
    inserted: function (el, params) {
        el.style.color = params.value;
    }
});

let vueDemo = new Vue({
    el: '#contain',
    data: {
        nowTime: new Date()
    },
    //私有过滤器
    filters: {
        transHour: function (val) {
            let Hour = val.getHours();
            let Minutes = val.getMinutes();
            let Seconds = val.getSeconds();
            var result = Hour + ':' + Minutes + ':' + Seconds;
            return result;
        }
    },
    //私有指令
    directives: {
        focus: {
            //inserted：被绑定元素插入父节点时调用
            inserted: function (el) {
                el.focus();
            }
        }
    }
});