🎅 大家好，我是侠岚酷，记录分享学习，一起进步！
🌈 个人主页：侠岚酷
目录
1.什么是filter?
2.全局定义：
定义单个：
循环定义多个：
3.局部定义：
4.过滤器中传入多个参数及过滤器的串联使用：
1.什么是filter?
Vue提供了一种过滤器 filter（英译：过滤;筛选）的方法，用于处理文本的格式化输出。通过定义过滤器，可以在模板中对数据进行处理，并以期望的形式进行显示。
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”(" | ")符号指示：
一、<!-- 在双花括号中 -->
<div>{{ msg | capitalize }}</div>
二、<!-- 在“v-bind”中 -->
<div v-bind:id="rawId | formatId"></div>
<!-- 或简写省略 v-bind -->
<div :id="rawId | formatId"></div>过滤器可以通过全局定义或局部定义的方式来使用。
！！注意：当全局过滤器和局部过滤器重名时，会采用局部过滤器。
2.全局定义：
全局定义的过滤器可以在应用的任何地方使用。
定义单个：
在main.js中写入（创建 Vue 实例之前全局定义过滤器）：
<!-- 字母转大写 -->
Vue.filter('filterA',(val) =>val.toUpperCase())
new Vue({
// ...
})<template>
<div>
<h5>过滤前:{{ msg }}</h5>
<h5>使用全局过滤器过滤后实现数据大写:{{msg | filterA}}</h5>
</div>
</template>
<script>
export default {
data(){
return{
msg :'hello world'
}
}
};
</script>循环定义多个：
新建filters.js文件：
const filters = {
addZero: function(value) {
var value = Math.round(parseFloat(value) * 100) / 100; //注: 一定要用var声明，let会报错
var arr = value.toString().split('.');
if (arr.length === 1) {
return value.toString() + '.00';
} else {
if (arr[1].length === 1) {
return value.toString() + '0';
}
}
},
transNumberToShort: function(value, decimal = 0) {
if (isNaN(value)) {
return 0
}
value=Number(value)
const BASE = 10000;
const SIZES = ["", "万", "亿", "万亿"];
let i = undefined;
let str = "";
if (value < BASE) {
str = value.toFixed(decimal);
} else {
i = Math.floor(Math.log(value) / Math.log(BASE));
str = `${((value / Math.pow(BASE, i))).toFixed(decimal)}${SIZES[i]}`;
}
return str;
}
}
export default filters;在main.js中引入并注册（在new Vue前注册）
<!-- 按照创建的filters.js路径引入 -->
import filters from '../static/js/filters';
<!-- 循环filters.js中注册定义的过滤器并全局注册-->
for (let key in filters) {
Vue.filter(key, filters[key]);
}
<!-- 在任意组件中使用-->
<div>{{price | addZero}}</div>3.局部定义：
而局部定义的过滤器只能在指定组件中使用。
<!-- 局部定义示例 -->
<template>
<div>
<div :id="rawId | formatId"></div>
<div>电话：{{ phone | resetPhone }}</div>
</div>
</template>
<script>
export default {
data() {
return {
rawId: 10,
phone:13213564781
};
},
filters:{
// 过滤后id=10变成id=100
formatId(val){
return val*10
},
//手机号中间星号（*）隐藏
resetPhone(val){
return val.replace(/^(\d{3})\d{4}(\d+)/,"$1****$2");
}
}
};
</script>
<style></style>4.过滤器中传入多个参数及过滤器的串联使用：
过滤器函数可以接收多个参数（可以是变量，可以是固定数值，也可以是表达式）：
！！注意：要过滤的数据（管道(“ | ”) 符号）前 的数据
或（多个过滤器串联时前一个过滤器的结果）作为（“ | ”）符号 后 过滤器的第一个参数。
{{ msg | filterA( arg1, 'YYY-MM-DD',fn ...) | filterB | filterC}}在上面例子中，filterA 被定义为接收多个参数的过滤器函数，表达式 msg 的值将作为参数传入到函数中。然后继续调用过滤器函数 filterB，将 filterA 的结果传递到 filterB 中，依次类推，继续调用过滤器函数 filterC，将 filterB 的结果传递到 filterC 中,得出最终过滤后的结果。
！！注意：过滤器中通过this是获取不到vue实例，可以通过过滤器的第二个参数进行传递获取,
过滤器函数中，一定要有return值
