filters 过滤器:「Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:」
先说说我个人使用过后的总结
- filters的使用常用的有两种 局部和全局
- 美的很、感觉就是用的舒服,简单且功能强大
使用场景
- 处理显示的数据,比如:有后缀 有前缀 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:{
...
}
然后我们再来看过滤器参数传递规则,因该是噢原来是这样,就明白了
方法二:全局使用
步骤:
- 编辑新建一个filters过滤器的方法放的js文件
- main.js 全局引入
- 在任何vue文件中使用
1.编辑新建一个filters过滤器的方法放的js文件,我个人习惯是如下:
在src下新建plugin文件夹 ,再下面新建filters.js
filters.js 里面和平时写的方法一样,如下
- 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等使用方法,我不怎么用就不写了
官网介绍说明等更详细,还是以官网主