目录
一、过滤器的概念
二、过滤器的使用位置
三、过滤器的分类
1、全局过滤器
2、本地过滤器
四、过滤器应用实例
1、使用过滤器实现省略号
2、使用过滤器处理时间戳
五、Vue3中已废弃过滤器
过滤器是vue中的一个特性，作用是用于对文本进行格式化的作用。分为全局过滤器和私有过滤器(本地过滤器)2种。这篇文章介绍了Vue2中的过滤器filter使用方法及注意说明，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下。
一、过滤器的概念
过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。
过滤器可以用在两个地方：插值表达式和 v-bind 属性绑定。
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用。
注意：在vue 1.0中有内置的过滤器，在2.0中去掉了内置过滤器，只有自定义过滤器
二、过滤器的使用位置
过滤器只能应用在两个地方：双花括号插值和v-bind表达式(后者从 2.1.0+ 开始支持)。例如：
<!--在双花括号中使用 格式：{{值 | 过滤器的名称}}-->
<div>{{3 | addZero}}</div>
<!--在v-bind中使用 格式：v-bind:id="值 | 过滤器的名称"-->
<div v-bind:id="1 | addZero">11</div>关于Vue2中的过滤器
👉 什么是vue的过滤器
过滤器可以通俗理解成是一个特殊的方法，用来加工数据的。
比如枚举值可以使用过滤器：如 1 2 3 4 对应 成功 失败 进行中 已退回 比如价格后面跟个过滤器，将价格格式化成小数点两位 比如时间格式化等，又比如可以过滤聊天中的某些脏话。
👉 如何写过滤器？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>过滤器</title> <!--引入vue.js--> <script src="node_modules/vue/dist/vue.js"></script> <script> window.onload = function () { // 定义全局过滤器 Vue.filter("contentFilter", function (value) { //全局过滤器 if (!value) { return ""; } return value .toUpperCase() .replace("TMD", "*不许说脏话噢*") .replace("SB", "*不许说脏话噢*"); }); Vue.filter("addZero", function (value) { // 如果value的值小于10则在前面添加0然后返回，否则直接返回value值 return value < 10 ? "0" + value : value; }); // 构建vue实例 new Vue({ el: "#app", data: { content: "小伙子,TMD就是个sb", num1: 40, num2: 60, num3: 70, }, filters: { //局部过滤器(本地过滤器) add(n1, n2, n3) { return n1 + n2 + n3; }, }, }); }; </script> </head> <body> <div id="app"> <h3>过滤器基本使用</h3> <!--在双花括号中使用全局过滤器 格式：{{值 | 过滤器的名称}}--> <p>{{content|contentFilter}}</p> <!--在v-bind中使用全局过滤器 格式：v-bind:id="值 | 过滤器的名称"--> <p v-bind:id="1 | addZero">11</p> <h3>过滤器接收参数</h3> <p>{{ num1| add(num2,num3)}}</p> </div> </body> </html>运行结果：
三、过滤器的分类
过滤器分为以下两种类型：
1、全局过滤器
多个 vue 实例之间共享过滤器，就可以定义全局过滤器
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>过滤器</title>
<!--引入vue.js-->
<script src="node_modules/vue/dist/vue.js"></script>
<script>
window.onload = function () {
// 定义全局过滤器
Vue.filter("addZero", function (value) {
// 如果value的值小于10则在前面添加0然后返回，否则直接返回value值
return value < 10 ? "0" + value : value;
});
// 构建vue实例
new Vue({
el: "#my",
data: {},
// 方法
methods: {},
});
};
</script>
</head>
<body>
<div id="my">
<!--在双花括号中使用全局过滤器 格式：{{值 | 过滤器的名称}}-->
<div>{{3 | addZero}}</div>
<div>{{15 | addZero}}</div>
<!--在v-bind中使用全局过滤器 格式：v-bind:id="值 | 过滤器的名称"-->
<div v-bind:id="1 | addZero">11</div>
<div v-bind:id="12 | addZero">15</div>
</div>
</body>
</html>运行效果：
关于全局过滤器的说明
如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器
2、本地过滤器
在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。——要定义到 filters 节点下，本质是一个函数
（1）在插值表达式或v-bind属性中使用 管道符
（2）在vue实例的 filters 节点中定义过滤方法
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>过滤器</title>
<!--引入vue.js-->
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
window.onload=function(){
// 定义全局过滤器
Vue.filter("addZero",function(value){
// 如果value的值小于10则在前面添加0然后返回，否则直接返回value值
return value<10?"0"+value:value;
});
// 构建vue实例
new Vue({
el:"#my",
data:{
},
// 方法
methods:{
},
// 定义本地过滤器
filters:{
roundNum:function(value){
// 四舍五入 小数点后保留两位
return value.toFixed(2);
},
roundNumWithPara:function(value,digit){
// 根据digit返回相应位数的小数
return value.toFixed(value,digit);
}
}
})
}
</script>
</head>
<body>
<div id="my">
<!--在双花括号中使用全局过滤器 格式：{{值 | 过滤器的名称}}-->
<div>{{3 | addZero}}</div>
<div>{{15 | addZero}}</div>
<!--在v-bind中使用全局过滤器 格式：v-bind:id="值 | 过滤器的名称"-->
<div v-bind:id="1 | addZero">11</div>
<div v-bind:id="12 | addZero">15</div>
<!--使用本地过滤器-->
<div>原始值：3.1415926，过滤后的值：{{3.1415926 | roundNum}}</div>
<!--保留小数点后3位-->
<div>原始值：3.1415926，过滤后的值：{{3.1415926 | roundNumWithPara(3)}}</div>
</div>
</body>
</html>运行效果：
💠 过滤器的注意点：
👉🏻 当全局过滤器和局部过滤器重名时，会采用局部过滤器。——即此时会按照“就近原则”，调用的是”私有过滤器“。
👉🏻 局部过滤器优先于全局过滤器被调用。
👉🏻 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右。
👉🏻 在过滤器函数中，一定要有 return 值。
👉🏻 在过滤器的形参中，可以获取到“管道符”前面待处理的那个值。
四、过滤器应用实例
1、使用过滤器实现省略号
代码示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>使用过滤器实现省略号</title>
<!--引入vue.js-->
<script src="node_modules/vue/dist/vue.js"></script>
<script>
window.onload = function () {
// 构建vue实例
new Vue({
el: "#my",
data: {
msg: "hello world",
},
// 方法
methods: {},
// 定义本地过滤器
filters: {
// 显示省略号
toShowEllipsis: function (value, len) {
if (value === "" || value === undefined || value === null) return;
if (value.length >= len) {
var str = value.substr(0, len);
return str + "...";
} else {
return value;
}
},
},
});
};
</script>
</head>
<body>
<div id="my">
<!--添加省略号 12345...-->
<input type="text" v-model="msg" />
{{msg | toShowEllipsis(6)}}
</div>
</body>
</html>
运行效果：
2、使用过滤器处理时间戳
代码示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>使用过滤器处理时间戳</title>
<!--引入vue.js-->
<script src="node_modules/vue/dist/vue.js"></script>
<script>
window.onload = function () {
// 构建vue实例
new Vue({
el: "#my",
data: {
curTime: 1546181790,
},
// 方法
methods: {},
// 定义本地过滤器
filters: {
// 处理时间戳 将时间戳转换成具体时间
toTimeStamp: function (value) {
//d 表示日期 t 日期和时间
var d = new Date(value * 1000);
return (
d.getFullYear() +
"-" +
(d.getMonth() + 1) +
"-" +
d.getDate() +
" " +
d.getHours() +
":" +
d.getMinutes() +
":" +
d.getSeconds()
);
},
},
});
};
</script>
</head>
<body>
<div id="my">
<!--时间戳-->
<p>当前时间：{{curTime | toTimeStamp }}</p>
</div>
</body>
</html>
运行效果：
五、Vue3中已废弃过滤器
👋🏻 注意：filter方法在vue3中已被废除
vue3要精简代码，并且filter功能重复，filter能实现的功能，methods和计算属性基本上也可以实现。把filter这方面的vue源码给删掉，这样更加方便维护。
例如
使用 computed 实现
<template>
<div id="app">
<ul v-for="(item, index) in arr" :key="index">
<li>快递公司:{{ item.deliverCompany }}</li>
<!-- 使用计算属性 -->
<li>运输状态:{{ computedText(item.expressState) }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
arr: [
{
deliverCompany: "京东快递",
expressState: "1",
},
{
deliverCompany: "顺丰快递",
expressState: "2",
},
{
deliverCompany: "中通快递",
expressState: "3",
},
{
deliverCompany: "邮政快递",
expressState: "4",
},
{
deliverCompany: "极兔快递",
expressState: "5",
},
{
deliverCompany: "某某快递",
expressState: null,
},
],
};
},
computed: {
computedText() {
// 计算属性要return一个函数接收参数
return function (state) {
switch (state) {
case "1":
return "待发货";
break;
case "2":
return "已发货";
break;
case "3":
return "运输中";
break;
case "4":
return "派件中";
break;
case "5":
return "已收货";
break;
default:
return "快递信息丢失";
break;
}
};
},
},
};
</script>
使用methods实现
<template>
<div id="app">
<ul v-for="(item, index) in arr" :key="index">
<li>快递公司:{{ item.deliverCompany }}</li>
<!-- 使用方法 -->
<li>运输状态:{{ methodsText(item.expressState) }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
arr: [
{
deliverCompany: "京东快递",
expressState: "1",
},
{
deliverCompany: "顺丰快递",
expressState: "2",
},
{
deliverCompany: "中通快递",
expressState: "3",
},
{
deliverCompany: "邮政快递",
expressState: "4",
},
{
deliverCompany: "极兔快递",
expressState: "5",
},
{
deliverCompany: "某某快递",
expressState: null,
},
],
};
},
methods: {
methodsText(state) {
switch (state) {
case "1":
return "待发货";
break;
case "2":
return "已发货";
break;
case "3":
return "运输中";
break;
case "4":
return "派件中";
break;
case "5":
return "已收货";
break;
default:
return "快递信息丢失";
break;
}
},
},
};
</script>