vue filters的使用

filters 过滤器：「Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：」

先说说我个人使用过后的总结

1. filters的使用常用的有两种 局部和全局
2. 美的很、感觉就是用的舒服，简单且功能强大

使用场景

1. 处理显示的数据，比如：有后缀 有前缀 5¥ 10¥ 时间戳转化正常时间等等…

方法一：局部使用

简单就是 在vue下和 methods对象平级定义一个filters对象用来处理过滤的数据，
然后直接在数据渲染的{{ }} 中放入就ok了，

	<el-table-column prop="endDate" label="考试结束时间" minWidth="100">
		<template slot-scope="scope">
			{{scope.row.endDate|ooooofs('yyyy.M.d hh:mm')}}
			// scope.row.endDate是第一个参数。‘yyyy.M.d hh:mm’是第二个参数
			//本来显示scope.row.endDate数据，
			//但进过filters过滤器后显示的是ooooofs返回的数据
		</template>
	</el-table-column>

	
	filters: {
            ooooofs(val,style) {//val参数1 style参数二
            	...数据处理
                return XXX  //返回数据
            }
        },
        methods:{
			...
     }

然后我们再来看过滤器参数传递规则，因该是噢原来是这样，就明白了

方法二：全局使用

 步骤：

1. 编辑新建一个filters过滤器的方法放的js文件
2. main.js 全局引入
3. 在任何vue文件中使用

1.编辑新建一个filters过滤器的方法放的js文件,我个人习惯是如下：

在src下新建plugin文件夹 ，再下面新建filters.js

filters.js 里面和平时写的方法一样，如下

2. main.js 全局引入

import * as filters from './plugin/filters.js'
Object.keys(filters).forEach(key=>{
//插入过滤器名和对应方法
 Vue.filter(key,filters[key])
})
//引入就这么简单

3.使用 ，和上述局部一样

<el-table-column prop="timeLength" label="考试时长">
	<template slot-scope="scope">
		{{scope.row.endDate|timeLength(scope.row.startDate)}}
	</template>
</el-table-column>

其他filters使用方法还有 挂载到vue.prototype 和 全局混入mixins等使用方法，我不怎么用就不写了

官网介绍说明等更详细，还是以官网主 

vue官网介绍：https://cn.vuejs.org/v2/guide/filters.html