Vue.js 过滤器可用于转换或格式化数据,以便自定义模板中的显示。全局过滤器可在整个应用程序中使用,而局部过滤器仅在组件或模板中可用。过滤器可以使用管道符号 (|) 加上过滤器名称和参数来应用,参数通过冒号 (:) 传递,多个过滤器可链式使用以应用多个转换。

Vue.js 中的过滤器
过滤器是 Vue.js 中用来转换或格式化数据的特殊指令。它们可以应用于表达式或组件,以自定义数据在模板中的显示方式。
用法
要使用过滤器,需要在过滤器名称前加上管道符号 (|) 后跟要应用的数据:
立即学习“前端免费学习笔记(深入)”;
{{ data | filterName }}例如:
{{ message | uppercase }}上面的代码将把 message 变量的值转换为大写。
创建自定义过滤器
可以通过两种方式创建自定义过滤器:
全局过滤器:
全局过滤器在整个应用程序中可用。它们在 Vue 实例化时注册:
【极品模板】出品的一款功能强大、安全性高、调用简单、扩展灵活的响应式多语言企业网站管理系统。 产品主要功能如下: 01、支持多语言扩展(独立内容表,可一键复制中文版数据) 02、支持一键修改后台路径; 03、杜绝常见弱口令,内置多种参数过滤、有效防范常见XSS; 04、支持文件分片上传功能,实现大文件轻松上传; 05、支持一键获取微信公众号文章(保存文章的图片到本地服务器); 06、支持一键
const app = new Vue({
filters: {
myFilter(value) { /* 过滤器逻辑 */ }
}
});局部过滤器:
局部过滤器仅在特定的组件或模板中可用。它们在该组件或模板中定义:
{{ message | myFilter }}
过滤器参数
过滤器可以接收参数,通过冒号 (:) 传递:
{{ data | filterName: argument }}例如:
{{ date | dateformat: 'YYYY-MM-DD' }}上面的代码将 date 变量的值转换为特定的日期格式。
链式过滤器
过滤器可以链接使用,以对数据应用多个转换:
{{ data | filter1 | filter2 | ... }}例如:
{{ message | uppercase | truncate(20) }}上面的代码将 message 变量的值转换为大写,然后截取为 20 个字符。









