vue 管道符、过滤器的使用（过滤、筛选、转化数据）

过滤器

全局过滤器

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、使用

{{msg | getSex}}

局部过滤器

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}`
})