做用:过滤数据
语法:
全局:
Vue.filter("过滤器名",(参数一,参数二)=>{});
参数一:须要过滤的数据
参数二:传递的数据
局部:
filters:{
过滤器名(){
}
}
使用:{{username|过滤器名()}}
步骤:
(1)时间过滤器
①声明一个全局过滤器
Vue.filter("date",(data,icon)=>{
let year=(new Date(data)).getFullYear();
let month=(new Date(data)).getMonth()+1;
let day=(new Date(data)).getDate();
var icon=icon||"/";
return `${year}${icon}${month}${icon}${day}`;
});
②实例中设置一个time:
let vm=new Vue({
el:"#app",
data:{
time:(new Date()).getTime()
}
});
③管道符进行使用:
{{time|date("-")}}
(2)图片尺寸过滤器
①data中将imgUrl引入:
data(){
return{
imgUrl:"http://p0.meituan.net/w.h/movie/2c24eb6a84a92b9ba837967851bec9462844109.jpg"
}
}
②声明局部filters:
filters:{
imgReplace(data,wh){
// 将字符串 "w.h" 替换为 "170.280"
return data.replace(/w\.h/,wh);
}
}
③页面中使用:
<img :src="imgUrl|imgReplace('170.280')">