vue系列教程（八）自定义过滤器
程序员文章站
2022-05-15 17:44:22
...
1. 简介
用来过滤模型数据，在显示之前进行数据处理和筛选
语法：{{ data | filter1(参数) | filter2(参数)}}
2. 关于内置过滤器
vue1.0中内置许多过滤器，如：
currency、uppercase、lowercase
limitBy
orderBy
filterBy
vue2.0中已经删除了所有内置过滤器，全部被废除
如何解决：
a.使用第三方工具库，如lodash、date-fns日期格式化、accounting.js货币格式化等
b.使用自定义过滤器
3. 自定义过滤器
分类：全局过滤器、局部过滤器
3.l 自定义全局过滤器
使用全局方法Vue.filter(过滤器ID,过滤器函数)
3.2 自定义局部过滤器
4. 代码案例
<script src="js/vue.js"></script>
<script>
/***
* 自定义全局过滤器
*/
Vue.filter('addZero',function(data){
// console.log(data);
/*自定义补零过滤器*/
return data<10?'0'+data:data;
});
/*Vue.filter('number',(data,n) =>{
return data.toFixed(n)
});*/
Vue.filter('date',(data) =>{
let d=new Date(data);
return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
});
window.onload = function () {
let vm = new Vue({
el:'#itany',
data:{
currentTime:Date.now()
},
filters:{
number:(data,n) =>{
return data.toFixed(n);
}
}
})
}
</script>
<style>
</style>
</head>
<body>
<div id = "itany">
<h3>{{18 | addZero}}</h3>
<h3>{{12.6533| number(3)}}</h3>
<h3>{{currentTime | date}}</h3>
</div>
</body>
github代码下载地址:https://github.com/xiangjianming/vueStart.git