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