专栏首页技术进阶之路Vue 中全局过滤器的使用

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: "免费"}
];

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 《第一行代码》中遇到的问题

    最近刚刚学完郭霖的第一行代码(第二版)这本书,是我选择入门安卓的一本书,看到很多人都推荐这本书,所以就去图书馆借来趁寒假学习下。但是由于技术是不断更新的,而这本...

    wsuo
  • 深入理解 MySQL 中的事务隔离级别

    事务就是执行一组 SQL 语句。这些 SQL 语句就是一条绳上的蚂蚱,要么一起成功(Commit),要么一起失败(RollBack)。

    wsuo
  • Ubuntu19.1 中 GitLab 的安装配置与卸载

    在我们自己安装GitLab之前,安装一些在安装过程中持续使用的软件非常重要。可以从Ubuntu的默认包存储库轻松安装所有必需的软件。

    wsuo
  • 基于ReadWriteLock读写锁实现的缓存

    张申傲
  • 浅析SkipList跳跃表原理及代码实现

    SkipList在leveldb以及lucence中都广为使用,是比较高效的数据结构。由于它的代码以及原理实现的简单性,更为人们所接受。我们首先看看SkipLi...

    sunsky
  • 013.Zabbix的Items(监控项)

    Items是从主机里面获取的所有数据,可以配置获取监控数据的方式、取值的数据类型、获取数值的间隔、历史数据保存时间、趋势数据保存时间、监控key的分组等。

    木二
  • ACTF2020新生赛-BackupFile

    要求我们传入key值,key值只能是数字,并且key值等于123ffwsfwefwf24r2f32ir23jrw923rskfjwtsw54w3才能得到flag

  • 大数据基础系列之kafka011生产者缓存超时,幂等性和事务实现

    一,demo及相关类 1,基本介绍 KafkaProducer是线程安全的,多线程间共享一个实例比共享多个实例更加高效。首先搞一个demo Properties...

    Spark学习技巧
  • 后端开发都应该掌握的Redis基础

    Redis支持多种不同的数据结构,包括5种基础数据结构和几种比较复杂的数据,这些数据结构可以满足不同的应用场景。

    良月柒
  • Redis基础都不会,好意思出去面试?

    Redis支持多种不同的数据结构,包括5种基础数据结构和几种比较复杂的数据,这些数据结构可以满足不同的应用场景。

    Java技术栈

扫码关注云+社区

领取腾讯云代金券