Vue 中全局过滤器的使用
时间:2022-07-28
本文章向大家介绍Vue 中全局过滤器的使用,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
首先需要在 main.js 中注册过滤器:
import filter from './filter/filter'
// 全局过滤器
Object.keys(filter).forEach(key => {
Vue.filter(key, filter[key]);
});
同级目录下的 filter
文件如下:
let optionKV = (list, key) => {
if (!list || !key) {
return "";
} else {
let result = "";
for (let i = 0; i < list.length; i++) {
if (key === list[i]["key"]) {
result = list[i]["value"];
}
}
return result;
}
};
export default {
optionKV
}
该方法的作用就是根据传入的对象数组,返回 key
对应的 value
;
主要的应用场景是:后端往往会用一个数字或者字母代表中文,比如 1 代表开启,前端在获取到 1 的时候需要通过过滤器转化为中文显示,而不是 1 这个数字,不然用户无法理解。
在使用的时候就可以这样使用:
<td>{{CHARGE | optionKV("C")}}</td>
其中 CHARGE
是:
CHARGE = [
{key: "C", value: "收费"},
{key: "F", value: "免费"}
];
- Spark源码系列(二)RDD详解
- Spark源码系列(三)作业运行过程
- Spark源码系列(四)图解作业生命周期
- Spark源码系列(五)分布式缓存
- 看我如何基于Python;Facepp打造智能监控系统
- Spark源码系列(六)Shuffle的过程解析
- Spark源码系列(九)Spark SQL初体验之解析过程详解
- Spark源码系列(七)Spark on yarn具体实现
- 我们要在任何可能的地方测试XSS漏洞
- Angr:一个具有动态符号执行和静态分析的二进制分析工具
- Spark编程指南
- Spark Streaming编程指南
- Spark源码系列(八)Spark Streaming实例分析
- “震网三代”(CVE-2017-8464)的几种利用方法与防范
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法