过滤器filters和|的使用记录--vue2

最新推荐文章于 2025-12-18 10:02:55 发布
原创 最新推荐文章于 2025-12-18 10:02:55 发布 · 129 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端

博客围绕前端过滤器展开，介绍其情景需求，即后端返回数字代表不同状态，使用过滤器可自动识别，避免多重if判断，使代码更简洁且可全局封装。还说明了过滤器是对显示数据进行特定格式化，比三目或if判断更直观，最后给出了非封装写法的代码示例。

情景需求 

后端返回数字1234等分别代表不同的状态 在使用时候进行自动识别而不是采用多重if判断增加代码的行数，更加简洁并且方法可以进行封装全局使用

什么是过滤器

过滤器：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理)

相比较三目或者if判断有更多的选择结果比较直观

{{ data | 过滤器函数名 }}

也可以在：class等v-bind中进行使用 比如颜色判断

代码

orderdata是引入的数据 用于for循环

 

 非封装写法

filters是与mounted等同级 并非在methods中的函数

 这里我使用的并不是switch写法  而是直接采用简化写法，更加直观

 

filters用法
weixin_53884488的博客
07-11 592
filters用法
vue filters 绑定用法及实现按需显示
weixin_55116366的博客
03-28 573
vue filters 绑定用法
Vue2.x教程之filter过滤器的使用
热门推荐
itKingOne的博客
07-04 1万+
vue2.0以后已经放弃对自带的过滤器函数，但同时对开发人员提供了一个filter 的处理器，虽然命名为  filter  ，但是我觉得叫做数据处理器更体贴。用以在不改变的data 的情况下  输出前段需要的格式数据。 基本调用方法： [html] view plain copy span style="color: rgb(82, 8
【土旦】在vue filters中 优雅的使用对象的key、value来替换 if switch多重判断简化流程...
weixin_30532987的博客
01-09 422
前言 　　之前写过滤器的时候都是 用 ifswitch 来进行值的判断 返回对应的值， 　　在没去百度搜索之前都是都是这样写的 1 if (val == 1) { 2 return "支付成功"; 3 } else if (val == 2) { 4 return "支付失败"; 5 } else if (val...
Vue中同时使用v-html和filters过滤器
shiyutim
10-22 961
原本是定义一个过滤器用来过滤表情url，解析成img，但是当使用的时候，发现并不能同时使用，于是使用$options.filters.face(value)。 // 原本是这样 <span>{{ item.content | face}}</span> // 改成这样 <span v-html="$options.filters.face(item.content...
vue v html使用过滤器,vue指令v-html中使用过滤器filters功能
weixin_32631729的博客
06-24 1309
Vue 2.0 不再支持在 v-html 中使用过滤器解决方法：1：全局方法(推荐)2：computed 属性3：$options.filters(推荐)1：使用全局方法：可以在 Vue 上定义全局方法：Vue.prototype.msg = function(msg){return msg.replace("\n"，"")}；然后所有地方上都可以直接用这个方法了：2：computed 属性var...
Vue「过滤器」的使用，自定义过滤器 filters （Vue的过滤器filters在Element表格el-table中的应用 ）
ddx2019的博客
05-12 6623
更多用法，参考vue官网 参考的博客链接：https://juejin.im/post/5c8607aee51d45425906c8a9
vue-filter-date-format-Vue 2的简单日期时间过滤器。-Vue.js开发
05-27
community / vue-filter-date-format用于Vue.js的简单日期时间过滤器从npm安装安装$ npm install @ vuejs-community / vue-filter-date @ vuejs-community / vue-filter-date-format简单日期时间Vue.js过滤器的安装...
vue2 v-model/v-text 中使用过滤器的方法示例
10-17
在Vue.js中，过滤器（Filters）是Vue实例的一个非常有用的特性，它允许用户对从插值...通过这些知识点，可以了解到如何在Vue2中定义和使用过滤器，以及如何在不支持直接使用过滤器的上下文中间接实现过滤器的应用。
vue-units-在Vue 2中使用的方便的单位转换过滤器的集合。-Vue.js开发
05-27
vue-units一个插件，用于将方便的转换过滤器添加到您的Vue.js项目中。 基于@ ben-ng制作的convert-units软件包。 安装Instal vue-units一个插件，用于向您的Vue.js项目添加方便的转换过滤器。 基于@ ben-ng制作的...
vue指令v-html使用过滤器filters功能实例
10-16
过滤器只能在双大括号插值和v-bind中使用的原因是，Vue的更新机制会追踪每个组件的作用域内依赖。当使用插值表达式时，Vue可以确保数据更新时自动重新渲染。然而，v-html指令直接设置innerHTML，Vue的响应式系统无法...
商城后台管理系统 02 添加规格参数-动态表单
weixin_52943021的博客
12-15 301
Boolean。
JavaScript 根据数组对象的某个 指定属性 分组合并，并累加金额
zhangyao940330的博客
12-15 219
item } 浅拷贝原对象的所有属性（如 id、name），合并时仅更新金额，其他属性保留第一个分组对象的值（若需保留所有属性，可修改为数组存储，如 name: [‘苹果’, ‘香蕉’]）。分组逻辑：用 Map 存储分组，键为 groupKey 的值（如 ‘水果’），值为合并后的对象。Map 比普通对象更安全（避免键名冲突，支持数字 / 对象等类型的键）。缺失金额或非数字（如 undefined、‘abc’）视为 0。字符串金额（如 ‘8’）自动转为数字；扩展需求：保留分组内所有非金额属性。
目前流行的前端框架
zwh1zwh的博客
12-11 1296
当前前端领域的技术选型非常丰富，不同的框架和工具各有侧重。为了让你快速建立一个整体印象，下面这个表格梳理了目前最主流的几个核心框架及其关键特性。框架名称核心特点学习曲线适用场景最新动态 (2025年)​- 基于组件和虚拟DOM- 灵活的JSX语法- 丰富的生态系统中等- 大型、复杂的单页应用(SPA)- 需要高度自定义和灵活性的项目- React 19 优化并发特性和服务器组件(RSC)- 与 Next.js 深度集成​- 渐进式框架，易于集成。
vue2/vue3前端创建脚手架并引入RBAC权限模型
最新发布
demotang的博客
12-18 150
本文介绍了基于Vue的RBAC权限管理系统实现方案。主要内容包括：1) 使用VueCLI创建项目并配置基础结构；2) 封装axios请求，实现请求/响应拦截；3) 通过Vuex管理角色和权限状态；4) 实现路由守卫和动态路由生成；5) 开发权限指令和按钮组件进行细粒度控制；6) 完整RBAC流程实现，包括登录认证、权限获取和访问控制。该方案覆盖了前端RBAC的核心功能，可根据项目需求灵活调整。
FontAwesome图标使用全攻略
2301_80012054的博客
12-18 222
通过 CSS 可以调整图标的大小、颜色和其他样式属性。.icon {
多应用统一身份认证方案-接口设计篇
专注于计算机研发知识和资讯分享
12-15 47
本文介绍了登录认证接口的改造方案，主要包括：1）统一登录流程设计，通过授权码实现多应用认证；2）新增设备登录限制功能，包括用户表添加设备限制字段和创建登录设备记录表；3）引入浏览器指纹技术加强安全验证。方案实现了集中认证与分散管理的结合，支持多应用独立鉴权，并通过设备指纹和登录次数统计增强账户安全性，同时保持各应用接口的自主性。系统架构上采用授权码与应用token并存机制，确保认证流程的灵活性与安全性。
商城后台管理系统 03 规格参数配置
weixin_52943021的博客
12-15 236
【代码】商城后台管理系统 03 规格参数配置。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值