vue学习笔记：2.vue过滤器

vue过滤器

1. 过滤器的语法定义 ： Vue.filter(‘过滤器名称’, function() {});
注意：过滤器中的 function ， 第一个参数，已经被规定死了，永远都是 过滤器 管道符前面 传递过来的数据
2. 过滤器调用时的格式 ：{{ name | 过滤器名称 }}
3.全局过滤器和私有过滤器 ：-过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致，这时候优先调用私有过滤器
Html

<div id="app2">
<h3>{{ dt | dateFormat() }}</h3>
</div>

JS
（1）定义全局过滤器

// 全局过滤器，进行时间格式化
Vue.filter('dateFormat', function(dateStr, pattern='') {
// 根据给定的时间字符串，得到特定的时间
var dt = new Date(dateStr);

//yyyy-mm-dd
var y = (dt.getFullYear()).toString().padStart(2, '0');
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');

// return y + '-' + m + '-' + d;

if(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}`;
}
});

（2）定义私有过滤器

var vm2 = new Vue({
el: '#app2',
data: {
dt: new Date()
},
filters: {  //定义私有过滤器   过滤器有两个条件   【过滤器名称 和 处理函数】
// 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致，这时候优先调用私有过滤器
dateFormat: function(dateStr, pattern='') {
// 根据给定的时间字符串，得到特定的时间
var dt = new Date(dateStr);

//yyyy-mm-dd
// String.padStart(2, '0') 补 0 的方法，只能用在字符串中，如果不是字符串，用 toString() 转换
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = (dt.getDate()).toString().padStart(2, '0');

// return y + '-' + m + '-' + d;

if(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}~~~~~~~`;
}
}
}
})