Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：（Vue.js官网）
下面用一个时间格式做个例子：
msg : new Date()
//需要过滤的数据
{{ msg | timeFormat}}
//定义全局的过滤器
//.toString().padStart(2,'0') 时间格式补齐
Vue.filter('timeFormat', function (dateStr, pattern = ' ') {
var dt = new Date(dateStr);
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = (dt.getDay()).toString().padStart(2, '0');
if (pattern && pattern.toLowerCase() == 'yyyy-mm-dd') {
return `${y}-${m}-${d}`;
} else {
var hh = (dt.getHours()).toString().padStart(2, '0')
var mm = (dt.getMinutes()).toString().padStart(2, '0')
var ss = (dt.getSeconds()).toString().padStart(2, '0')
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
})
上面是定义全局的过滤器，下面的话定义一个私有过滤器：
//需要过滤的数据
{{ msg | timeFormat}}
//定义私有过滤器
var vm= new Vue({
el:'#app',
data:{
msg : new Date()
},
methods:{
},
filters:{
dtFormate(dateStr, pattern = ' ') {
var time = new Date(dateStr)
var y = time.getFullYear();
var m = time.getMonth() + 1;
var d = time.getDay();
if (pattern.toLowerCase() == 'yyyy-mm-dd') {
return `${y}-${m}-${d}`
} else {
var hh = time.getHours()
var mm = time.getMinutes()
var ss = time.getSeconds()
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
}
}
})
以上两个例子的第二个参数： pattern = ' '，是为了输出格式做修改，方便用户需求。
过滤器可以串联：（Vue.js官网）
{{ message | filterA | filterB }}
