Vue中自定义过滤器的学习

vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化，过滤器可以用在两个地方：mustache 插值表达式和v-bind表达式。过滤器应给被添加在Javascript表达式的尾部，由管道符指示，过滤器也分全局过滤器和私有的过滤器，所谓全局的过滤器，就是所有的vm实例都共享的，而私有过滤器是局部开始使用的过滤器

一 过滤器的语法定义

Vue.filter{'过滤器的名称',function(){}}

例如：定义一个全局的filter ，名字叫做msgFormat，效果是用疯狂代替单纯

Vue.filter('msgFormat',function(msg,arg){
//字符串的replace方法除了可以用字符串外，还可以使用正则表达式
return msg.replace(/单纯/g,arg);
});
Vue.filter('test',function (msg){
return msg+'========';
})
var vm = new Vue({
el:'#app',
data:{
msg:'曾经，我也是一个单纯的少年，单纯的我傻傻的问，谁才是世上最单纯的人呢？'

},
methods:{

}

});

自定义指令引用

<p>{{msg | msgFormat('疯狂')|test}}</p>

二.私有指定的定义
私有指令定义的位置是在Vue创建的实例中，例如定义一个私有的处理时间的过滤器

filters: { //定义私有的过滤器，过滤器有两个条件： 过滤名称和处理函数
//过滤器在调用的时候采用的是就近原则，如果私有过滤器和全局过滤器的名称一致，这时候优先调用私有的过滤器
DateFormate:function(dateStr,pattern=""){
var dt=new Date(dateStr);
var y=dt.getFullYear();
var m=(dt.getMonth()+1).toString().padStart(2,'0');
var d=dt.getDate().toString().padStart(2,'0');

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}------`;
}

}

}