Vue插件之Vue过滤器
什么是过滤器呢?
先举个栗子哈: 用户输入了一个英文句子,我们需要首字母大写,那么在显示这个句子前,我们给它加个过滤器,使句子首字母大写就OK
再举个栗子: 你请求数据得到了一个数组,渲染时,你需要把这个数组转为一个有键的对象,那么渲染前,使用过滤器处理一下这个数组即可
由上面两个栗子可以看出,过滤器就是在数据渲染或使用前,对目标数据做一定的特殊处理,方便后续的渲染或使用
过滤器是怎么实现的?
普通的过滤器
// 普通的过滤器一般是一个函数方法 let fliterA = (str) => { if (!str) return '' str = str.toString() return str.charAt(0).toUpperCase() + str.slice(1) } // 调用也很简单,就是调用 fliterA(str) 这个方法 fliterA('abc') // 返回: Abc
Vue中的过滤器:普通的过滤器看上去不美观,可扩展性也比较差,因此在Vue中有一个Fliter对象,专门用来构造过滤器。Fliter对象可以放在Vue组建中,申明局部的过滤器;也可以放到单个的js文件中,申明一个全局的Vue过滤器。两者在组件中的使用方法完全一样。
局部过滤器
<!-- test.vue --> <template> <span> {{ 'abc' | fliterA }} </span> </template> <script> export default { data() { return {} }, filters: { fliterA: (str) => { if (!str) return '' str = str.toString() return str.charAt(0).toUpperCase() + str.slice(1) } } } </script> <!-- 页面渲染结果为: Abc -->
全局过滤器
// fliter.js import Vue from 'vue' /** * @interface fliterA {str} */ Vue.filter('fliterA', (str) => { if (!str) return '' str = str.toString() return str.charAt(0).toUpperCase() + str.slice(1) })
在组件中使用
<template> <span>{{ 'hello ' | fliterA }}</span> </template>