位置: IT常识 - 正文

Vue2中过滤器的用法详解(vue过滤器可以异步吗)

发布时间：2024-01-17

Vue2中过滤器的用法详解

一、过滤器的概念

二、过滤器的使用位置

三、过滤器的分类

1、全局过滤器

2、本地过滤器

四、过滤器应用实例

1、使用过滤器实现省略号

2、使用过滤器处理时间戳

五、Vue3中已废弃过滤器

推荐整理分享Vue2中过滤器的用法详解(vue过滤器可以异步吗)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:前端vue过滤器,vue过滤器封装,vue.js过滤器,vue3过滤器,前端vue过滤器,vue中过滤器的使用,vue3过滤器,vue过滤器用法,内容如对您有帮助，希望把文章链接给更多的朋友！

过滤器是vue中的一个特性，作用是用于对文本进行格式化的作用。分为全局过滤器和私有过滤器(本地过滤器)2种。这篇文章介绍了Vue2中的过滤器filter使用方法及注意说明，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下。

一、过滤器的概念

过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。

过滤器可以用在两个地方：插值表达式和 v-bind 属性绑定。

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用。

注意：在vue 1.0中有内置的过滤器，在2.0中去掉了内置过滤器，只有自定义过滤器

二、过滤器的使用位置

过滤器只能应用在两个地方：双花括号插值和v-bind表达式(后者从 2.1.0+ 开始支持)。例如：

<div>{{3 | addZero}}</div><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>  <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>  <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>  <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>  <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>  <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>  <div v-bind:id="1 | addZero">11</div> <div v-bind:id="12 | addZero">15</div>  <div>原始值：3.1415926，过滤后的值：{{3.1415926 | roundNum}}</div>  <div>原始值：3.1415926，过滤后的值：{{3.1415926 | roundNumWithPara(3)}}</div> </div></body></html>

运行效果：

💠 过滤器的注意点：

👉🏻 当全局过滤器和局部过滤器重名时，会采用局部过滤器。——即此时会按照“就近原则”，调用的是”私有过滤器“。

👉🏻 局部过滤器优先于全局过滤器被调用。

👉🏻 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右。

👉🏻 在过滤器函数中，一定要有 return 值。

👉🏻 在过滤器的形参中，可以获取到“管道符”前面待处理的那个值。

四、过滤器应用实例1、使用过滤器实现省略号

代码示例如下：

运行效果：

2、使用过滤器处理时间戳

代码示例如下：

运行效果：

五、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>

本文链接地址:https://www.jiuchutong.com/zhishi/299722.html 转载请保留说明！

上一篇：计算机视觉——图像视觉显著性检测(计算机视觉的应用)

下一篇：学习笔记：深度学习（2）——BP神经网络