0


Vue封装全局过滤器Filters

封装全局的filters和对axios的二次封装很像,新建一个filters文件夹,新建index.js和filters.js

是为了提高开发效率,将多次调用的过滤器注册为全局过滤器

index.js

import Vue from 'vue'
import * as filters from './filters'  //相当于取出所有,别名,filters是一个对象

Object.keys(filters).forEach(key=>{
    console.log(key);         //不能理解的话打印一下就很直观
    console.log(filters[key]);
    Vue.filter(key,filters[key])
})

filters.js

export function getSex(value){
    switch (value) {
        case 'man':
          return '男';
        case 'woman':
          return '女';
        default:
          return value;
      }
};

//后面需要新增的过滤器继续添加在下面即可

不要忘记在main.js里面按照实际路径引入全局自定义组件

import './filters/index'

在页面中使用和局部的过滤器是一样的

但是不需要在filters:{} 里面定义了:

<template>
  <div class="demo">
    <ul>
      <li>{{man | getSex}}</li>
    </ul>
  </div>
</template>
<script>
export default{
  data(){
    return{
      man:'man',
    }
  }
}
</script>

如果不能理解,最后来看看刚刚打印的结果:

key其实就是函数名

filters[key]就是整个对象

是不是Vue.filter('getSex',(value)=>{switch.....})呢

注意:写完后要注册新的全局filter就在filter.js里面不断添加就可以了,可以提高开发效率。

       不过不建议添加过多全局过滤器,只有单个页面用到还是直接写在页面中较好。

本文转载自: https://blog.csdn.net/qq_20495901/article/details/124930973
版权归原作者 Beannnnnnn 所有, 如有侵权,请联系我们删除。

“Vue封装全局过滤器Filters”的评论:

还没有评论