Vue过滤器filter和filters的使用详解

已于 2023-08-17 17:58:22 修改
阅读量1.9w 收藏 44
点赞数 7
分类专栏： vue2实战记录 文章标签： vue.js 前端 javascript
于 2020-04-29 14:29:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37635012/article/details/105839101
版权

过滤器的作用

在使用插值表达式的时候，我们通常会有一种需求，就是将数据进行二次的格式化(比如日期的格式化)，Vue的过滤器的实现参考了linux的shell命令的管道的实现原理，即上一个命令的输出是下一个命令的输入,Vue.js 允许你自定义过滤器，作用是处理一些常见的文本格式化，过滤器可以用在双花括号插值和v-bind表达式上(后者从2.1.0+开始支持)。
在这里插入图片描述

全局过滤器和局部过滤器

有两种方式注册过滤器：全局注册和局部注册。
在这里插入图片描述

过滤器的使用

过滤器函数接受表达式的值作为第一个参数。过滤器还可以串联：{ { message | filterA | filterB}} 也就是{ { 数据| 过滤器A | 过滤器B }} 过滤器是JS函数，因此可以接受参数：{ { message | filterA(‘arg1’,arg2) }} 这里，message 是第一个参数，字符串 ‘arg1’ 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。除了在插值表达式里可以用过滤器外，在v-bind指令中也可以使用过滤器，与其用法一致。

下面看个实际应用例子，先来看下效果图，如下图:

了解本专栏 订阅专栏 解锁全文 超级会员免费看
百思不得小李
关注
  • 7
    点赞
  • 踩
  • 44
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
订阅专栏
vue 过滤器filter实例详解
10-18
Vue.js 的过滤器（Filter）是用于数据转换的一种强大工具，它允许我们在模板中对数据进行处理，以呈现更符合需求的显示效果。过滤器通常用于格式化数据，如日期格式化、字符串首字母大写等。Vue.js 提供了内置的过滤...
vue的过滤器filter实例详解
12-09
排版记录，点耽误时间，我就简单的来，下面是一个vue 过滤器的写法，demo 演示，限制一个字符串的长度。 vue filter 的官网介绍 https://cn.vuejs.org/v2/guide/filters.html 下面就具体拿自己的一个例子介绍： ...
Vue中的过滤器（filter）
热门推荐
05-02 7万+
目录 过滤器使用位置 全局过滤器、局部过滤器 全局过滤器： 局部过滤器： 过滤器中传入多个参数： 多个过滤器串联： 官方文档：https://cn.vuejs.org/v2/guide/filters.html 在官方文档中，是这样说明的：可被用于一些常见的文本格式化，vue中过滤器的作用可被用于一些常见的文本格式化。（也就是修饰文本，但是文本内容不会改变） 个人觉得称它为加工车间会更加贴切一些，过滤器可以用来筛选出符合条件的，丢弃不符合条件的；加工车间既可以筛选，又可以对筛选出来的进..
filters过滤器的使用方法
wyhcyzai99的博客
09-11 2237
过滤器（函数） 过滤器（Filters）是Vue为开发者提供的功能，常用于文本的格式化，过滤器可以和v-bind属性绑定 注：过滤器函数形参中的val永远都是管道符前面那个值 ody> <div id="app"> <p> message的值是:{{message | capi}} </p> </div> </body> <script> const
Vue中的过滤器——filter()
最新发布
qq_63497385的博客
06-03 319
在 Vue.js 中，过滤器（Filters）是一种用于在文本数据被渲染到 DOM 之前对其进行格式化的功能。它们可以用在两个地方：mustache 插值和v-bind表达式。然而，请注意，从 Vue 2.x 开始，过滤器主要用于文本插值，并且在 Vue 3.x 中，过滤器已经被移除，因为它们的功能可以通过计算属性或方法来实现。
vue全局过滤器(filter)和局部过滤器(filters)
Tianxiaoxixi的博客
05-28 8946
vue全局过滤器(filter)和局部过滤器(filters)
vue中filter用法
qq_42238554的博客
10-28 5726
filters过滤器 filters是一个对象，在vue中的表达式如下： filters:{ fun1(v) { ...处理逻辑 return 返回处理后的值; }, fun2(v) { ...处理逻辑 return 返回处理后的值; }, } Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。 过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
Vue filter过滤器用法
XieY9512的博客
09-22 360
一、在html中使用（msg为需要filter处理的值，filterA为过滤器） {{ msg | filterA }} 双括号插值内单个使用 {{ msg | filterA| filterB }} 双括号插值内多个连用。 <h1 v-bind:id=" msg | filterA"></h1> v-bind绑定的值的地方。 {{ msg | filterA('***', '--')}} 有参数的过滤器 二、在js中使用 this.$options.filters...
vue+Ant 使用filters过滤某个展示列
Canon80的博客
05-11 494
【代码】vue+Ant 使用filters过滤某个展示列。
vue自定义过滤器创建和使用方法详解
08-28
在Vue 1.x 版本中，内置了一些过滤器，如 `currency` 和 `capitalize`，但在Vue 2.x 及更高版本中，官方移除了内置过滤器，鼓励开发者使用计算属性或方法来实现类似的功能，以保持模板的简洁性和提高性能。...
如何换个角度使用VUE过滤器详解
01-19
过滤器在Vue中的主要用于文本格式化，如小写转大小，日期格式化等操作。官方对这个功能介绍也很简单，不过确实很简单，就一个函数而已。但最近在做两款APP时，遇到一些特殊的需求。然后就对vue中的filter一些用法...
Vue filter介绍及其使用详解
10-19
Vue过滤器主要用于数据的格式化，它们可以被用在插值表达式（mustache语法）或v-model指令中。Vue提供了几个内置的过滤器，包括`capitalize`、`uppercase`、`lowercase`、`currency`、`pluralize`、`debounce`、`...
filters过滤器的简单使用
...
10-16 397
<template> <div> <h1>{{date | formDate}}</h1> </div> </template> <script> import moment from 'moment'; export default { data() { return { date:new Date() } }, filters: { formDate(date) { .
【Web_Vue2】Vue中的过滤器（filter）
qq_45703937的博客
12-30 2892
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化
vue过滤器filters的使用
@热血与梦想的博客
08-11 944
过滤器
Vue中过滤器用法详解
RayShyy的博客
10-24 9227
Vue.js官方文档说明：可被用于一些常见的文本格式化。个人理解就是把一些不需要的东西过滤掉，只是对数据进行加工处理然后返回处理后的数据，和计算属性很相似。过滤器的应用场景：平常在开发中，过滤器的应用场景有很多，比如单位转换、文本格式化、时间格式化之类的等。ps：在vue3.0中已废弃filter。
【Vue】基础(四) 过滤器 vue.filter
GY的博客
11-25 6739
vue.filter介绍全局过滤器二、局部过滤器三、过滤器的串联四、综合示例五、面试题解析 介绍 在Vue.js中，过滤器主要用于文本的格式化，或者数组数据的过滤与排序等。从Vue.js2.0.0版本开始，内置的过滤器被删除了，如果使用过滤器，需要自己编写。过滤器可以用在两个地方：双花括号插值和v-bind表达式，使用时通过 管道符（ | ） 添加到表达式的尾部使用。 在双花括号中：{{ message | capitalize }} 在 v-bind中：<div v-bind:id="raw
filters 过滤器使用
weixin_55478382的博客
05-24 238
vue 过滤器使用
Vue中的vxe-table教程9-表格筛选
weixin_42289273的博客
01-12 9363
知识点： 三种筛选方式： 1. Name多选筛选方式 2. Sex单选筛选方式，:filter-multiple="false" 3. Age输入数据判等筛选方式 总结：通过设置 filters 属性和 filter-method 方法可以开启列筛选功能，通过 filter-multiple=false 设置为单选 可以设置默认值:checked: true，默认筛选哪一项 效果图： 1. index.html代码 <!DOCTYPE html> <html l.
vue过滤器filter
06-12
Vue.js 的过滤器（Filter）是一种可重用的功能，用于对文本进行格式化。它们可以用于格式化日期、数字、字符串等，以便更好地呈现给用户。过滤器可以在模板表达式中使用，通过管道符“|”来调用。 过滤器有两个参数：过滤器名称和一个函数。函数接受一个值作为输入，并返回转换后的值。可以在 Vue 实例中定义本地过滤器，也可以在全局范围内注册过滤器。 下面是一个简单的例子，演示如何在 Vue 模板中使用过滤器： ```html <!-- 在模板中使用过滤器 --> <div>{{ message | capitalize }}</div> ``` ```javascript // 定义过滤器 Vue.filter('capitalize', function(value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) }) ``` 在上面的代码中，我们定义了一个名为“capitalize”的全局过滤器。它将文本转换为首字母大写的形式。在模板中，我们使用管道符“|”将“message”值传递给过滤器。过滤器对该值进行处理，并返回处理后的结果。 请注意，过滤器不会修改原始数据，而是返回经过处理后的副本。因此，在上面的例子中，原始的“message”值仍然是不变的。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值