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)
}

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