过滤器
全局过滤器
Vue.filter("过滤器名称", 处理函数 );
全局过滤器使用方法
1、main.js中定义全局过滤器
Vue.filter('nameFiltes',function(data){ return data })
2、src目录下新建 filters/index.js 过滤器文件
此文件为过滤器文件,需要导出过滤器方法export function getSex(data){ switch (data){ case 'man': return "男"; case 'woman': return "女"; } };
3、main.js中引入过滤器文件
* as 代表导入文件中所有的方法,filters定义的一个别名import * as filters from './filters/index'
4、main.js文件中遍历文件中的方法
拿到键filters后使用forEach遍历,把拿到的所有过滤器存储在Vue过滤器中//全局过滤器
Object.keys(filters).forEach(key=>{ Vue.filter(key,filters[key]) })
5、使用
<div>{ {msg | getSex}}</div>
局部过滤器
filters: { 过滤器名称(数据) { 处理函数 }}
局部过滤器使用方法
{
{ row.Status | filterData }}
export default {
filters: {
filterData(val) {
... ... // 对数据进行逻辑处理
return val
}
},
},
}
注意
- 局部过滤器定义在vue的实例中
- 全局过滤器定义在main.js
- 一个表达式可以使用多个过滤器。
- 过滤器之间需要用管道符“
|
”隔开。其执行顺序从左往右
常见操作
筛选、过滤、转化
对字段字符串进行筛选、过滤、转化,得到需要的字段进行渲染,实现条件显示以及正则判断、逻辑判断等效果
filterexception(val) {
if (val == '90') {
return 'A'
} else if (val == '70') {
return 'B'
} else {
return val
}
}
filterexception(val) {
var str = val
var arr = RegExp(/异常/).exec(str)
if (arr == null) {
return val
} else {
return arr[0]
}
},
时间过滤器
将一些常见的文本格式化、将数据转化为我们想要的格式
{
{ time | dateFormat}}
// 局部的时间过滤器
filters: {
dataFormat(input, pattern = "") {
const dt = new Date(originVal)
const y = dt.getFullYear()
const m = (dt.getMonth()+1+'').padStart(2,'0')
const d = (dt.getDate()+'').padStart(2,'0')
const hh = (dt.getHours()+1+'').padStart(2,'0')
const mm = (dt.getMinutes()+'').padStart(2,'0')
const ss = (dt.getSeconds()+1+'').padStart(2,'0')
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})
}
// 全局的时间过滤器
Vue.filter('dateFormat',function(originVal){
const dt = new Date(originVal)
const y = dt.getFullYear()
const m = (dt.getMonth()+1+'').padStart(2,'0')
const d = (dt.getDate()+'').padStart(2,'0')
const hh = (dt.getHours()+1+'').padStart(2,'0')
const mm = (dt.getMinutes()+'').padStart(2,'0')
const ss = (dt.getSeconds()+1+'').padStart(2,'0')
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})