有时我们需要拿到数据做相应的格式化展现在页面上,但是不能改变原数据,仅改变展示方式,此时用到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();
}
}
}
});