Vue Filter 使用指南:让数据展示更加灵活

前言

Vue 的过滤器机制允许我们在模板中对数据进行简单而高效的转换,这不仅有助于提升代码的可读性和可维护性,还能显著增强用户界面的响应能力。尽管过滤器并非 Vue 3 的核心功能,但它们在 Vue 2 中仍然是一个非常实用的工具。

什么是 Vue 的 Filter?

简单来说,Vue 的 filter 就是一个可以对数据进行简单转换的函数。它们可以用来格式化文本、数字、日期等,让我们在模板中更方便地处理数据。

如何定义和使用 Filter

定义全局 Filter

全局 filter 可以在 Vue 实例的任何地方使用。我们可以在创建 Vue 实例之前,通过 Vue.filter 方法来定义一个全局过滤器。

Vue.filter('capitalize', function(value) {if (!value) return '';value = value.toString();return value.charAt(0).toUpperCase() + value.slice(1);
});

在上面的例子中,我们定义了一个名为 capitalize 的过滤器,用于将字符串的首字母大写。

使用全局 Filter

在模板中使用过滤器非常简单。我们只需在模板表达式中使用管道符 |,然后跟上过滤器的名称即可。

<div id="app"><p>{{ message | capitalize }}</p>
</div>new Vue({el: '#app',data: {message: 'hello world'}
});

在这个例子中,message 的值是 hello world,通过 capitalize 过滤器,我们最终看到的将是 Hello world。

定义局部 Filter

有时候我们只需要在某个组件中使用过滤器,这时候就可以定义局部过滤器。局部过滤器是在组件的 filters 选项中定义的。

Vue.component('my-component', {template: '<p>{{ message | lowercase }}</p>',data: function() {return {message: 'HELLO WORLD'}},filters: {lowercase: function(value) {if (!value) return '';return value.toLowerCase();}}
});

在这个例子中,我们定义了一个名为 lowercase 的局部过滤器,用于将字符串转换为小写。

使用场景

为了更全面地理解 Vue 的 filter,接下来我们会进一步探讨一些具体的使用场景,并通过代码示例来展示如何应用这些过滤器。

1. 时间格式化

在项目中处理时间和日期是非常常见的需求。我们可以定义一个过滤器来格式化时间。

Vue.filter('formatTime', function(value, format = 'YYYY-MM-DD HH:mm:ss') {if (!value) return '';let date = new Date(value);let year = date.getFullYear();let month = (date.getMonth() + 1).toString().padStart(2, '0');let day = date.getDate().toString().padStart(2, '0');let hours = date.getHours().toString().padStart(2, '0');let minutes = date.getMinutes().toString().padStart(2, '0');let seconds = date.getSeconds().toString().padStart(2, '0');return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
});

模板中使用这个过滤器:

<p>{{ timestamp | formatTime }}</p>

2. 数字千分位分隔

Vue.filter('thousands', function(value) {if (!value) return '0';return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
});

3. 字符串截断

Vue.filter('truncate', function(value, length) {if (!value) return '';if (value.length <= length) return value;return value.substring(0, length) + '...';
});

4. 货币格式化

在电商平台或金融应用中,经常需要对价格进行格式化显示。下面是一个将数字转化为货币格式的过滤器。

Vue.filter('currency', function(value, currencySymbol = '$') {if (!value) return currencySymbol + '0.00';let num = parseFloat(value).toFixed(2);return `${currencySymbol}${num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}`;
});

模板中使用这个过滤器:

<p>{{ price | currency('¥') }}</p>

5. 文本大写和小写转换

有时候我们需要将文本统一转换为大写或小写,这可以通过简单的过滤器来实现。

Vue.filter('uppercase', function(value) {if (!value) return '';return value.toUpperCase();
});Vue.filter('lowercase', function(value) {if (!value) return '';return value.toLowerCase();
});

模板中使用这个过滤器:

<p>{{ message | uppercase }}</p>
<p>{{ message | lowercase }}</p>

高级用法与实践

在掌握了基础用法之后,你可能会想知道如何在更复杂的场景中使用 Vue 的 filter。接下来,我们会探讨一些高级用法,并通过实际的代码示例来帮助你更好地理解和应用这些知识。

1. 动态参数传递

有时候我们希望过滤器能够接受多个参数,并根据不同的参数值来进行不同的处理。Vue 的 filter 支持在模板中传递多个参数。

定义一个多参数过滤器:

Vue.filter('formatNumber', function(value, decimals = 2, suffix = '') {if (!value) return '0' + suffix;let num = parseFloat(value).toFixed(decimals);return `${num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}${suffix}`;
});

模板中使用这个多参数过滤器:

<p>{{ price | formatNumber(2, ' USD') }}</p>

在这个例子中,formatNumber 过滤器会接受两个参数:decimals 和 suffix,并根据传入的值进行相应的格式化。

2. 使用过滤器链

通过过滤器链,我们可以将多个过滤器组合在一起使用,以实现更复杂的数据处理。下面是一个示例,展示了如何将多个过滤器链式调用。

定义过滤器:

Vue.filter('capitalize', function(value) {if (!value) return '';value = value.toString();return value.charAt(0).toUpperCase() + value.slice(1);
});Vue.filter('truncate', function(value, length = 10) {if (!value) return '';if (value.length <= length) return value;return value.substring(0, length) + '...';
});Vue.filter('append', function(value, suffix = '') {if (!value) return '';return value + suffix;
});

模板中使用过滤器链:

<p>{{ message | capitalize | truncate(15) | append('... Read more') }}</p>

在这个例子中,message 会依次通过 capitalize、truncate 和 append 这三个过滤器进行处理,最终展示一个简洁、格式化后的字符串。

3. 在计算属性和方法中使用过滤器

尽管过滤器主要在模板中使用,但我们也可以在计算属性和方法中调用过滤器函数,从而实现更复杂的逻辑。

new Vue({el: '#app',data: {price: 12345.6789},filters: {currency: function(value, symbol = '$') {if (!value) return symbol + '0.00';let num = parseFloat(value).toFixed(2);return `${symbol}${num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}`;}},computed: {formattedPrice: function() {return this.$options.filters.currency(this.price, '¥');}}
});

在这个例子中,formattedPrice 是一个计算属性,它调用了定义在 filters 选项中的 currency 过滤器。

4. 自定义指令与过滤器结合

有时候我们需要在指令中使用过滤器来实现一些复杂的 DOM 操作。下面是一个示例,展示了如何在自定义指令中使用过滤器。

定义自定义指令:

Vue.directive('formatted-text', {bind(el, binding, vnode) {const value = binding.value;const filterName = binding.arg;const filter = vnode.context.$options.filters[filterName];if (filter) {el.innerHTML = filter(value);} else {el.innerHTML = value;}}
});

定义过滤器:

Vue.filter('capitalize', function(value) {if (!value) return '';return value.charAt(0).toUpperCase() + value.slice(1);
});

模板中使用自定义指令:

<div v-formatted-text:capitalize="message"></div>

在这个例子中,自定义指令 v-formatted-text 会根据传入的过滤器 capitalize 对内容进行处理,并将结果渲染到 DOM 中。

注意事项

  1. 保持简单:过滤器应该尽量保持简单,只处理基本的格式化任务。复杂的逻辑应放在计算属性或方法中。
  2. 避免副作用:过滤器应该是纯函数,不应修改全局状态或引入副作用。
  3. 复用性:尽量通过全局过滤器的方式定义常用的格式化逻辑,以提高代码的复用性和维护性。
  4. 性能优化:在大数据量或频繁更新的场景下,过滤器可能会影响性能。此时应考虑使用其他方式来优化性能,如计算属性或方法。

总结

Vue 的 filter 是一个非常强大且易用的工具,通过它我们可以在模板中轻松地进行数据格式化和转换。无论是全局过滤器还是局部过滤器,它们都能够极大地提升我们开发应用的效率和代码的可读性。

不过,正如前面提到的,对于复杂的逻辑,计算属性(computed properties)和方法(methods)可能会是更好的选择,因为这样可以避免性能问题,并保持代码的清晰和简洁。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/458742.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Appium中的api(一)

目录 1.基础python代码准备 1--参数的一些说明 2--python内所要编写的代码 解释 2.如何获取包名和界面名 1-api 2-完整代码 代码解释 3.如何关闭驱动连接 4.安装卸载app 1--卸载 2--安装 5.判断app是否安装 6.将应用放到后台在切换为前台的时间 7.UIAutomatorViewer的使用 1--找…

并联 高电压、高电流 放大器实现 2 倍输出电流模块±2A

1.1 并联输出电路设计注意事项 直接对两个功率运算放大器的输出进行硬接线并不是一种好的电气做法。如果两个运算放大器的输出直接连接在一起&#xff0c;则可能会导致不均匀的电流共享。这是因为其中的每个运算放大器都尝试强制施加略微不同的 Vout 电压&#xff0c;该电压取决…

vulnhub(16):sickos(两种打点方式)

端口 ip&#xff1a;192.168.72.154 nmap -Pn -p- 192.168.72.154 --min-rate 10000PORT STATE SERVICE 22 open ssh 3128 open http-proxy 8080 closed http-proxy web渗透方式一&#xff1a;web后台 正常访问80端口&#xff0c;是不开放的&#xff0c;我们需要配置…

高速定向广播声光预警系统赋能高速安全管控

近年来&#xff0c;高速重大交通事故屡见不鲜&#xff0c;安全管控一直是高速运营的重中之重。如何利用现代化技术和信息化手段&#xff0c;创新、智能、高效的压降交通事故的发生概率&#xff0c;优化交通安全管控质量&#xff0c;是近年来交管部门的主要工作&#xff0c;也是…

云原生Istio基础

一&#xff0e;Service Mesh 架构 Service Mesh&#xff08;服务网格&#xff09;是一种用于处理服务到服务通信的专用基础设施层。它的主要目的是将微服务之间复杂的通信和治理逻辑从微服务代码中分离出来&#xff0c;放到一个独立的层中进行管理。传统的微服务架构中&#x…

浅析Android View绘制过程中的Surface

前言 在《浅析Android中View的测量布局流程》中我们对VSYNC信号到达App进程之后开启的View布局过程进行了分析&#xff0c;经过对整个App界面的View树进行遍历完成了测量和布局&#xff0c;确定了View的大小以及在屏幕中所处的位置。但是&#xff0c;如果想让用户在屏幕上看到…

【十六进制数转十进制数 】

【十六进制数转十进制数 】 C语言版本C 版本Java版本Python版本 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 从键盘接收一个十六进制数&#xff0c;编程实现将其转换成十进制数。 输入 输入一个十六进制数 输出 输出一个十进制数 样…

GitHub 上的优质 Linux 开源项目,真滴硬核!

作为一名互联网人&#xff0c;提起 Linux 大家都不陌生&#xff0c;尤其是日常跟 Linux 操作系统打交道最多的&#xff0c;最熟悉不过了。互联网上关于 Linux 相关的教程和资料也非常的多&#xff0c;但是当你从中筛选出真正对自己有帮助的资料是需要花费很大精力与时间的。 G…

JVM基础(内存结构)

文章目录 内存结构JAVA堆方法区 &#xff08;Method Area&#xff09;运行时常量池&#xff08;Runtime Constant Pool&#xff09; 虚拟机栈 &#xff08;Java Virtual Machine Stack&#xff09;本地方法摘栈&#xff08;Native Method Stacks&#xff09;程序计数器&#xf…

交易的人生就是对未来不断的挑战!

在这个充满不确定性的市场中&#xff0c;我们每个人都渴望找到一条通往成功的路径。在Eagle Trader交易员中&#xff0c;有一位资深交易者&#xff0c;他不仅对交易有着不同寻常的执着和热爱&#xff0c;而且他的真诚见解和独到的交易哲学&#xff0c;可能会触动你的心弦。他的…

尚硅谷-react教程-求和案例-@redux-devtools/extension 开发者工具使用-笔记

## 7.求和案例_react-redux开发者工具的使用(1).npm install redux-devtools/extension(2).store中进行配置import { composeWithDevTools } from redux-devtools/extension;export default createStore(allReducer,composeWithDevTools(applyMiddleware(thunk))) src/redux/s…

OpenCV系列教程六:信用卡数字识别、人脸检测、车牌/答题卡识别、OCR

文章目录 一、信用卡数字识别1.1 模板匹配1.2 匹配多个对象1.3 处理数字模板1.4 预处理卡片信息&#xff0c;得到4组数字块。1.5 遍历数字块&#xff0c;将卡片中每个数字与模板数字进行匹配 二、人脸检测2.1人脸检测算法原理2.2 OpenCV中的人脸检测流程 三、车牌识别3.1 安装t…

一行代码,实现请假审批流程(Java版)

首先画一个流程图 测试流程图 activiti 项目基础配置 activiti 工作流引擎数据库设计 工作流引擎API 介绍 什么是BPMN流程图 工作流引擎同类对比 继续学习方向 总结 工作流审批功能是办公OA系统核心能力&#xff0c;如果让你设计一个工作流审批系统&#xff0c;你会吗…

SDK5(note中)

在原有SDK5(note上)里的代码上添加了 timer的消息 LRESULT OnCreate(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) {OutputDebugString(_T("[11syy]WM_CREATE\n"));//创建一个计时器SetTimer(hwnd, 1, 1000, nullptr);return TRUE; }LRESULT OnClese(HWND …

全星魅 北斗三号船载终端的优势和领域利用

QM43BS型北斗三号船载终端&#xff1a;开启航海通信与定位新时代 在当今这个信息化高速发展的时代&#xff0c;航海领域对于通信与定位技术的需求愈发迫切。深圳市全民北斗科技有限公司&#xff0c;作为北斗技术应用领域的佼佼者&#xff0c;针对数传通信和位置服务应用&#x…

Python 实现深度学习模型预测控制--预测模型构建

链接&#xff1a;深度学习模型预测控制 链接&#xff1a;WangXiaoMingo/TensorDL-MPC: DL-MPC(deep learning model predictive control) is a software toolkit developed based on the Python and TensorFlow frameworks, designed to enhance the performance of tradition…

你了解kafka消息队列么?

消息队列概述 一. 消息队列组件二. 消息队列通信模式2.1 点对点模式2.2 发布/订阅模式 三. 消息队列的优缺点3.1 消息队列的优点3.2 消息队列的缺点 四. 总结 前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&…

Android Junit 单元测试 | 依赖配置和编译报错解决

问题 为什么在依赖中添加了testImplement在build APK的时候还是会报错&#xff1f;是因为没有识别到test文件夹是test源代码路径吗&#xff1f; 最常见的配置有: implementation - 所有源代码集(包括test源代码集)中都有该依赖库.testImplementation - 依赖关系仅在test源代码…

理解磁盘结构---CHS---LAB---文件系统

1&#xff0c;初步了解磁盘 机械磁盘是计算机中唯的一个机械设备&#xff0c; 特点是慢&#xff0c;容量大&#xff0c;价格便宜。 磁盘上面的光面&#xff0c;由数不清的小磁铁构成&#xff0c;我们知道磁铁是有n&#xff0f;&#xff53;极的&#xff0c;这刚好与二进制的&…

selenium脚本编写及八大元素定位方法

selenium脚本编写 上篇文章介绍了selenium环境搭建&#xff0c;搭建好之后就可以开始写代码了 基础脚本,打开一个网址 from selenium import webdriver driver webdriver.Chrome()#打开chrome浏览器 driver.get(https://www.baidu.com) #打开百度 打开本地HTML文件 上篇…