全局过滤器？

Question

老师，请教一个问题，本节中10：35 秒处的在main.js 新增这段代码

// 全局过滤器
Object.keys(filter).forEach(key => {
  Vue.filter(key, filter[key])
});

可以详细解释一下作用吗？包括谁在调用它，整个过程是怎么样的，
我的理解是在编译 the-course.vue中

<span class="badge badge-info">{{COURSE_LEVEL | optionKV(course.level)}}</span>

会调用 js/filter.js中的

/**
 * 数组过滤器 例如：{{SECTION_CHARGE | optionKV(section.charge)}}
 * @param object 例如：{CHARGE:{key:"C", value:"收费"},FREE:{key:"F", value:"免费"}}
 * @param key  例如： C
 * @returns {string}  例如：收费
 */
let optionKV = (object, key) => {
    if (!object || !key) {
        return "";
    } else {
        let result = "";
        for (let enums in object) {
            if (key === object[enums]["key"]) {
                result = object[enums]["value"];
            }
        }
        return result;
    }
};

然后，会返回”初级“ / "中级“ / “高级” ， 那为什么还需要在 main.js 中新增那段代码呢？ 谢谢老师解答！

Answer 1

甲蛙 2020-09-30 09:43:32

在main.js里加那一段，是为了让Vue知道filter.js里有一些过滤器，否则Vue怎么知道optionKV是什么呢？

相当要用过滤器，要先跟Vue告知下。

Object.keys(filter).forEach(key => {
  Vue.filter(key, filter[key])
});

上面这段可以分为两部分来看，一是Object.keys(filter)，这个是拿到filter里面所有的过滤方法，得到一个数组。后面的就是循环数据，一个一个的用Vue.filter方法注册一下，告知Vue，这些都是过滤器。

• 提问者 慕神4535282 #1

  非常感谢！