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

最新推荐文章于 2024-01-31 15:54:47 发布
最新推荐文章于 2024-01-31 15:54:47 发布
阅读量653 收藏 1
点赞数
分类专栏： vue 文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wxl1555/article/details/121565076
版权

前言

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

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

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

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

设计思路

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

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

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

具体代码

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

img

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

img

在main.js中注入

img

在页面中使用

img

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

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

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

我的CSDN博客地址：https://blog.csdn.net/wxl1555

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

邮箱：wuxiaolong1024@163.com

牛长犇
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中过滤器filter的使用
webchang的博客
01-24 753
vue中过滤器filter的使用，代码演示和讲解
Vue项目中过滤器(filters)的用法
qq_46416934的博客
05-18 1394
过滤器使用场景 在调取接口的返回数据的时候，我们经常能够得到各种Number类型的数据。 这种格式的数据，很多时候都是表明对应的类型。 如果直接返回到页面上展示，对于操作人员来讲，没有任何意义。 所以，一般的情况下，我们需要把格式对应类型的中文名称显示出来。 这个时候一般的操作情况是使用类似的转换方法，将值传递过去，然后进行转换显示。 在VUE中，我们可以使用Vue的filter钩子函数来实现。 实现方式 代码格式 {{}}中实现filters顺序： {{参数 | filters函数 | filters函.
vue中过滤器（filters）的使用
yangyi
07-11 736
过滤器(filters)，也是一个函数 位置，放置filters的位置与el、data、methods等并列； <script> const app = new Vue({ el:'#app', data(){ return { price: 100.123, } }, methods:{ // getShowPrice(price){ // return '￥' + price.toFixed(2) // } }, filt
vue 中 filters过滤器的用法、作用
MQJ
11-03 3565
对象里面的字段并不是直接渲染在页面中，而是需要把数据处理过后的内容显示在页面上，做法：利用vue提供的filter钩子，实现数据的过滤处理再渲染处理过后的内容。2、过滤器函数始终以表达式的值作为第一个参数，带引号的参数视为字符串，而不带引号的参数按表达式计算。2、值会缓存，在我们要监听的数据没有变化的时间，是不会去执行对象相对应的数据是（性能比较好）1、Vue.filters()是在全局注册的一个自定义过滤器，必须放在Vue实例化之前。5、Vue中的computed、filters的异同以及应用场景。
vue 通过全局过滤器（filters）枚举转换后端传回来数据
路虽远行则将至，事虽难做则必成。
02-27 853
在实际开发中，会发现有些键名是传回数字的显示，表格的数据，我们就需要把它转换成用户看的懂的数据。全局过滤器除了可以使用枚举，还可以给时间戳转换，form自定义表单规则，相当于一个工具包。枚举除了给表格替换数据，还可以给导出替换数据，打印替换数据，给form表单提供下拉款数据。
小白都能看明白的Vue中过滤器(filter)的使用详解
youhebuke225的博客
05-28 1万+
Vue中过滤器(filter)的使用 源码 点击 1. 局部过滤器 语法 template <div>{{ name | capitalize }}</div> //或者 <div v-bind:id="rawId | formatId"></div> script filters: { capitalize: function (value) { return value } } 说明 过滤器函数中的value,就是 |前面
Vue中的过滤器详解（应用场景和原理分析）
常来常往，共同成长
01-05 1699
过滤器（filter）是输送介质管道上不可缺少的一种装置。大白话，就是把一些不必要的东西过滤掉。过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，我们也可以理解其为一个纯函数。Vue允许你自定义过滤器，可被用于一些常见的文本格式化。ps:Vue3中已废弃filter
Vue filters过滤器的使用方法
08-29
在本文中，我们将详细介绍 Vue filters 过滤器的使用方法，并通过实例来说明其使用场景。 1. filters 的定义 在 Vue 中，filters 是一个对象，其中每个属性都是一个函数。这些函数将作为过滤器被应用于数据上。...
Vue3不支持Filters过滤器的问题
10-14
主要介绍了Vue3不支持Filters过滤器的问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
Vue 过滤器filters及基本用法
08-28
Vue 过滤器filters及基本用法 Vue 过滤器是 Vue.js 框架中的一种功能强大的工具，能够对数据进行格式化和处理。下面，我们将介绍 Vue 过滤器的实例代码和基本用法。 what is Vue 过滤器？ Vue 过滤器是一种函数，...
vue 过滤器filter实例详解
10-18
VueJs 提供了强大的过滤器API，能够对数据进行各种过滤处理，返回需要的结果。这篇文章主要给大家介绍vue 过滤器filter实例，感兴趣的朋友跟随脚本之家小编一起学习吧
过滤器vue.filters的使用方法实现
12-13
写项目的时候，有一些方法我们是需要全局使用的，比如数字的四色五入保留小数点啊、一些工具方法、字符的格式化啊等等。这些很多页面需要用的、使用频率极高的...然后就可以在.vue页面中使用了 [removed] export de
Vue中的过滤器（filter）
热门推荐
05-02 7万+
目录 过滤器使用位置 全局过滤器、局部过滤器 全局过滤器： 局部过滤器： 过滤器中传入多个参数： 多个过滤器串联： 官方文档：https://cn.vuejs.org/v2/guide/filters.html 在官方文档中，是这样说明的：可被用于一些常见的文本格式化，vue中过滤器的作用可被用于一些常见的文本格式化。（也就是修饰文本，但是文本内容不会改变） 个人觉得称它为加工车间会更加贴切一些，过滤器可以用来筛选出符合条件的，丢弃不符合条件的；加工车间既可以筛选，又可以对筛选出来的进..
【Web_Vue2】Vue中的过滤器（filter）
J20020212的博客
01-11 1213
在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。过滤器（filters）是 vue 为开发者提供的功能，对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）实质不改变原始数据，我们也可以理解其为一个纯函数。过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在一个组件的选项中定义本地的过滤器，即 filters 节点下定义的过滤器，称为局部过滤器，因为它只能在当前 vm 实例所控制的 el 区域内使用。
Vue中的过滤器（filter）的介绍和使用
最新发布
weixin_48755718的博客
01-31 2493
filters（过滤器的使用），局部定义，全局定义
vue filters的使用
zeng092210的博客
08-12 1181
filters 过滤器：「Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：」 先说说我个人使用过后的总结 filters的使用常用的有两种 局部和全局 美的很、感觉就是用的舒服，简单且功能强大 使用场景 处理显示的数据，比如：有后缀 有前缀 5¥ 10¥ 时间戳转化正常时间等等… 方法一：局部使用.
vue全局过滤器(filter)和局部过滤器(filters)
Tianxiaoxixi的博客
05-28 8946
vue全局过滤器(filter)和局部过滤器(filters)
【Vue】基础(四) 过滤器 vue.filter
GY的博客
11-25 6738
vue.filter介绍全局过滤器二、局部过滤器三、过滤器的串联四、综合示例五、面试题解析 介绍 在Vue.js中，过滤器主要用于文本的格式化，或者数组数据的过滤与排序等。从Vue.js2.0.0版本开始，内置的过滤器被删除了，如果使用过滤器，需要自己编写。过滤器可以用在两个地方：双花括号插值和v-bind表达式，使用时通过 管道符（ | ） 添加到表达式的尾部使用。 在双花括号中：{{ message | capitalize }} 在 v-bind中：<div v-bind:id="raw
vue中filter过滤器的使用
07-27
你可以通过在Vue实例中定义过滤器，然后在模板中使用它们。 下面是一个使用filter过滤器的示例： 1. 首先，在Vue实例中定义一个过滤器： ``` Vue.filter('capitalize', function(value) { if (!value) return '' ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值