在这里只简单探讨关于如何将vue过滤器封装到一个文件当中，当然可以封装多个不同类型的过滤器，然后可以在需要使用过滤器的文件当中进行复用，非常的方便。 1. 首先涉及到 filters.vue (引用过滤器的文件),其中MoneyFormat就是一个过滤器，其的写法是写在需要过滤的变量的后面并用"|"隔开，当这么写时就可以将texts这个变量传入到MoneyFormat这个过滤器里进行相应的处理 文件代码：
<template> <div class="chart-container"> <ul> <li v-for="texts in text" >{{texts | MoneyFormat}}</li> </ul> </div> </template> <script> import filter from '../filters/index' export default { data() { return { text: ['holle','sdfs','fuck'] }; }, }; </script>然后是用来封装过滤器的文件 filters下的index.js文件，这个文件是用来进行封装过滤器的在下面的这个文件中一共封装了两个过滤器：MoneyFormat和timeFilter（实际作用见代码注释），其中代码里的"value "这个变量就是上文所说的传进来的变量，过滤器的作用就是对这个传进来的变量进行个种各样的操作。 比如将一个单词的首字母统一变成大写，或者统一在一些数字前面加上某些符号，又或者可以应用于以下场景：后端的一个接口会传过来两种数据，0和1其中0代表设备离线，1代表设备在线。但是为了直观的表示设备是否在线就不能直接只写上0或1，需要将0转化成离线，1转换成在线，这就可以通过过滤器来实现。 文件代码：
//vue定义全局过滤器 //第一个过滤器：用来将单词的首字母变成大写 let MoneyFormat = value => { if (value) { let str = value.toString(); //获取英文，以空格分组把字符串转为数组，遍历每一项，第一项转为大写字母 let newArr = str.split(" ").map(ele => { console.log(ele.slice(1)) return ele.charAt(0).toUpperCase() + ele.slice(1) }); return newArr.join(" ") } } //第二个过滤器：用来将字符串'22'添加到字母后面 let timeFilter = function (value) { return value + "22" } //暴露这两个过滤器 export { MoneyFormat,timeFilter }最后就是在main.js文件当中引入全局过滤器： 文件代码：
//全局过滤器 import * as filters from './filters/index' Object.keys(filters).forEach(key => { Vue.filter(key, filters[key]) })2. 最后附上文件结构图：
