Vue学习笔记之--过滤器实例

昨天介绍了过滤器的使用及如何自定义过滤器,我们今天就来趁热打铁,过一下本次重构项目中我们在哪些地方可以使用过滤器,列出我们常用的过滤器集合,以方便日常使用。

单位类:

px

涉及到dom动态渲染的案例,我们经常会计算dom的一些属性,直接上代码:

1
2
3
4
//默认返回浮点类型 + 'px'
function(value){
return value && value !== 0 ? parseFloat(value) + 'px' : '';
}

rem

同上

1
2
3
4
//默认返回 数字 / 100 + 'rem'
function(value){
return value && value !== 0 ? parseFloat(value) / 100 + 'rem' : '';
}

样式类:

bg

动态设置背景

1
2
3
function(url){
return 'url(' + url + ')';
}

translate (待解决

设置偏移,统一使用translate3d,进行加速

1
2

数字类

number

对数字进行过滤,参数为保留小数的位数

1
2
3
function(num, fixed){
return parseFloat(num).toFixed(fixed)
}

后续通过不断积累进行添加…