vue项目中过滤器filters的使用设计

最新推荐文章于 2025-07-11 11:54:59 发布
原创 最新推荐文章于 2025-07-11 11:54:59 发布 · 777 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vue

本文介绍了在Vue项目中如何优化过滤器的使用方式，通过创建单独的filters文件夹，将每个过滤器封装在独立文件中，并在main.js中全局注册。这种方式使得过滤器的管理和使用更加整洁有序。例如，对于时间格式化过滤器，可以在main.js中注入，并在需要的地方直接调用。这种设计提高了代码的可读性和可维护性。

前言

vue项目中过滤器是很常见的功能，我们应该如何合理的设计它的使用方式呢？

先看下官方文档： vue过滤器文档

项目中对过滤器的使用不是很统一，有局部使用的，全局使用的，或者是直接引用过滤器文件的每个都注册一下，这几种使用方式都不是很友好。

我们如何优化一下呢？且向下看。

设计思路

  1. 单独文件夹维护过滤器工具；

  2. 在main.js中注入为全局过滤器;

  3. 在具体需要的地方使用;

具体代码

新建filters文件夹，每一个过滤器为一个单独的文件维护，最后统一收口到index文件中。

img

比如一个很常见的时间格式过滤器

img

在main.js中注入

img

在页面中使用

img

这样我们就完成了对过滤器使用方式的设计，是不是感觉这样很清爽呢。

欢迎大家关注博主的公众号：猿人说事

github资源地址：vue项目中过滤器filters的使用设计

我的优快云博客地址：https://blog.youkuaiyun.com/wxl1555

如果您对我的博客内容有疑惑或质疑的地方，请在下方评论区留言，或邮件给我，我们共同学习进步。

邮箱：wuxiaolong1024@163.com

Vue3不支持Filters过滤器的问题
10-14
这一改变对于习惯于在Vue2.x中使用过滤器处理文本格式和数据转换的开发人员来说，需要进行一定的适应和转变。 在Vue2.x中，过滤器是处理数据格式化的常用方式。它允许开发者在模板中使用“|”符号后跟过滤器名称的...
在vue中使用公共过滤器filter的方法
08-27
下面我们将详细介绍在 Vue 中使用公共过滤器 filter 的方法。 一、定义公共过滤器 首先，我们需要在公用 js 中定义一个通用的 filter.js 文件。在这个文件中，我们可以定义多个过滤器，每个过滤器都是一个函数。...
Vue项目中的过滤器
青山不改，绿水长流。
09-06 215
注意: 并没有改变原本的数据, 可是产生新的对应的数据。功能: 对要显示的数据进行特定格式化后再显示。
vue 过滤器filter实例详解
10-18
VueJs 提供了强大的过滤器API，能够对数据进行各种过滤处理，返回需要的结果。这篇文章主要给大家介绍vue 过滤器filter实例，感兴趣的朋友跟随脚本之家小编一起学习吧
vue项目实战（四）：过滤器filters
csyifanZhang的博客
03-20 342
过滤器的作用：对后端返回的数据进行添油加醋，分为局部过滤器和全局过滤器。在项目中全局过滤器的使用非常的广泛。 文章目录一、局部过滤器1-声明过滤器：`filters`2-使用过滤器`{{数据属性|过滤器名}}`3-使用效果：二、全局过滤器1-声明全局过滤器`Vue.filter（名称，函数）`2-使用全局过滤器3-使用效果三、细节探讨：多参数传递的实现 一、局部过滤器 1-声明过滤器：filter...
vue中filters的用法
weixin_39845185的博客
01-18 1078
在vue项目中使用过滤器
Hoodps的专栏
09-12 602
1、在src目录下utils文件夹里新建一个filter.js文件 //处理游戏用时显示格式 如1分20秒--1'20" let formatTime = value => { if (!value) { return '' } else{ return value.replace(/分/g,"'").replace(/秒/g,'"') ...
Vue 中过滤器（filters）的使用方法
大剑师兰特的GIS世界
02-06 1909
Vue.js 中的过滤器（Filter）是一种用于处理文本的自定义函数，可以在模板中直接使用。过滤器可以用在两个地方：`双花括号插值和 v-bind 表达式`。`过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号（|）表示`。
Vue filters过滤器的使用方法
08-29
在本文中，我们将详细介绍 Vue filters 过滤器的使用方法，并通过实例来说明其使用场景。 1. filters 的定义 在 Vue 中，filters 是一个对象，其中每个属性都是一个函数。这些函数将作为过滤器被应用于数据上。...
Vue封装全局过滤器Filters的步骤
10-14
这样过滤器就可以在整个Vue应用中使用了。 ```javascript // main.js import Vue from 'vue'; import App from './App.vue'; import filters from './filters'; // 引入过滤器 // 注册全局过滤器 Object.keys...
Vue 过滤器filters及基本用法
11-27
1、示例代码 采用vue单文件组件，使用moment插件格式化日期 <template> <div> <h1>{{date | dateFormat}}</h1> </div> </template> [removed] import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); export default { data() { return { date: new Date() } }, filters: { dateFormat(
filters在vue项目中的使用
m0_65274248的博客
11-26 536
filters在vue项目中的使用
Vue项目中使用过滤器
静水流深
03-10 2601
为什么要使用过滤器？ ​ 能够对数据进行各种过滤处理，返回需要的结果，非常的方便和快捷。 怎么使用过滤器？ ​ 首先过滤器分为两类： >- 全局过滤器 >- 局部过滤器 例如： Vue.filter('filterDome', function(val) { // val 为固定的参数 即是你需要过滤的数据 return val.split('.') }) 全局过滤...
vue 中 filters过滤器的用法、作用
MQJ
11-03 3739
对象里面的字段并不是直接渲染在页面中，而是需要把数据处理过后的内容显示在页面上，做法：利用vue提供的filter钩子，实现数据的过滤处理再渲染处理过后的内容。2、过滤器函数始终以表达式的值作为第一个参数，带引号的参数视为字符串，而不带引号的参数按表达式计算。2、值会缓存，在我们要监听的数据没有变化的时间，是不会去执行对象相对应的数据是（性能比较好）1、Vue.filters()是在全局注册的一个自定义过滤器，必须放在Vue实例化之前。5、Vue中的computed、filters的异同以及应用场景。
Vue 过滤器
小牛牛的博客
02-15 767
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="../js/vue1.0.js"></script> <script> window.onload = function(){ var vm =
Vue中的过滤器详解（应用场景和原理分析）
常来常往，共同成长
01-05 2893
过滤器（filter）是输送介质管道上不可缺少的一种装置。大白话，就是把一些不必要的东西过滤掉。过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，我们也可以理解其为一个纯函数。Vue允许你自定义过滤器，可被用于一些常见的文本格式化。ps:Vue3中已废弃filter
Vue中的过滤器（filter）
热门推荐
05-02 8万+
目录 过滤器使用位置 全局过滤器、局部过滤器 全局过滤器： 局部过滤器： 过滤器中传入多个参数： 多个过滤器串联： 官方文档：https://cn.vuejs.org/v2/guide/filters.html 在官方文档中，是这样说明的：可被用于一些常见的文本格式化，vue中过滤器的作用可被用于一些常见的文本格式化。（也就是修饰文本，但是文本内容不会改变） 个人觉得称它为加工车间会更加贴切一些，过滤器可以用来筛选出符合条件的，丢弃不符合条件的；加工车间既可以筛选，又可以对筛选出来的进..
vue 中filter（过滤器）的使用
李三丧的博客
08-20 1774
今天修改bug过程中，看到前同事的项目代码中，发现定义了一个 fliters，很奇怪，这是啥？过滤器？网上查了一下确实叫vue自定义过滤器，初始我以为和js的Array中filter()过滤器一样，过滤符合标准的变量之类的，结果看过vue的fliter文档之后发现似乎不仅仅是这样。 最开始，我觉得，这算啥过滤器啊，这不应该叫数据处理器吗？为啥这么说，下面就来看看它的用法。...
Vue的过滤器（filters）
最新发布
XD1060198931的博客
07-11 1927
在 Vue 中，过滤器（filters）是一种特殊的函数，主要用于对文本数据进行格式化处理，比如转换大小写、日期格式化、货币格式化等。你可以在组件内部定义过滤器，这样它就只在当前组件中有效。 在模板中使用过滤器： 2. 全局过滤器 若要让过滤器在所有组件中都能使用，可将其定义为全局过滤器。通常在创建 Vue 实例之前定义全局过滤器。 在任意组件的模板中使用全局过滤器： 3. 过滤器串联 Vue 过滤器支持串联使用，也就是一个值可以依次通过多个过滤器进行处理。过滤器串联的顺序是从左到右依次
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值