Vue中如何使用filter 过滤器
一、入门
filter 介绍
1、 有时需要 例如 一些数据格式($ 20.00)、最大值(一些逻辑处理后,返回想要的格式或者数据);可以使用 filter 。
2、VUE 中的过滤器不能替代Vue中的methods、computed或者watch
3、过滤器不改变真正的data,而只是改变渲染的结果,并返回过滤后的版本。
4、过滤器好处,尽可能保持API响应的干净、在前端处理数据格式。
5、在Vue 2.0 已经无内置的过滤器了,可自定义过滤器。
filter 参数
1、可使用到两个地方
<!-- 花括号中使用 -->
<div>{{money|moneyFilter(2,'元')}}</div>
<!-- v-bind 中使用 -->
<div :id="id | capitalize"></div>
2、filter 管道 传参
tempure : 过滤器中传递的值 或者表达式 (obj、arr 等);
a:参数 1 ;
b:参数 2
<div :id=" tempure | filterFn(a,b)">我是过滤器</div>
<div>{{tempure | filterFn1(a,b) | filterFn2(a,b)}}</div>
二、全局使用
在main.js 中 定义
1、moneyFilter:过滤器名称
2、函数中的参数解析:
value:通过管道传来的数据
num:调用过滤器时在圆括号中第一个参数
type:调用过滤器时在圆括号中第二个参数
Vue.filter("moneyFilter", function(value, num, type) {
//value是使用过滤器是的表达式或者值,num和tyep中的参数
return "¥" + value.toFixed(num) + type;
});
在 需要的地方引用
{{20 | moneyFilter(2,'元')}} // 20:00 元
三、局部(组件内)使用
filters:{
moneyFilter: function(value, num, type) {
return "¥" + value.toFixed(num) + type;
},
},
在 需要的地方引用
{{20 | moneyFilter(2,'元')}} // 20:00 元
文件定义全局过滤器
自定义函数(filterfun.js)中
//金额格式过滤器
let moneyFilter = (value, num, type) => {
return "¥" + value.toFixed(num) + type;
};
ecport default {
moneyFilter,
}
在 main.js 中引入
import * as filterfun from "./filters";
3、注册自定义过滤器
Object.keys(filterfun ).forEach(key => {
Vue.filter(key, filterfun[key]);
});