vue2.0自定义过滤器

| vue

为了不让自己日后有这样的疑问，这段时间到底在干嘛？？所以来记录一下。今天是周末，还在公司，唉。

1
2
3
4
5
6
7
8
9
10
11
12
Vue.filter(id,[definition])
参数
{string} id
{Function} [definition]

// 注册
Vue.filter('my-filter', function (value) {
  // 返回处理后的值
})

// getter，返回已注册的过滤器
var myFilter = Vue.filter('my-filter')

过滤器串联

1
2
3
4
{{ message | filterA | filterB }}
{{ message | filterA('arg1', arg2) }}  
//filterA 被定义为接收三个参数的过滤器函数,其中 message 的值作为第一个参数，
普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数

在组件内部定义

1
2
3
4
5
methods:{
 filters:{
  capitalize:function(){}
}
}

全局定义过滤器

1
2
3
4
5
6
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

举例
在模块化的vue开发中，可以把过滤器写在一个单独的js文件里面，在js里面书写各类过滤器
时间过滤器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
export default{
	dateformatter:(str)=>{
		 if (!str) return ''
	    var date = new Date(str)
	    var time = new Date().getTime() - date.getTime()//单位毫秒
	    if (time < 0) {
	        return ''
	    } else if ((time / 1000 < 30)) {
	        return '刚刚'
	    } else if (time / 1000 < 60) {
	        return parseInt((time / 1000)) + '秒前'
	    } else if ((time / 60000) < 60) {
	        return parseInt((time / 60000)) + '分钟前'
	    } else if ((time / 3600000) < 24) {
	        return parseInt(time / 3600000) + '小时前'
	    } else if ((time / 86400000) < 31) {
	        return parseInt(time / 86400000) + '天前'
	    } else if ((time / 2592000000) < 12) {
	        return parseInt(time / 2592000000) + '月前'
	    } else {
	        return parseInt(time / 31536000000) + '年前'
	    }
	}
}

在main.js中import进去，注册

1
2
3
4
5
import dateformatter from './uitls/xxx.js'
//全局注册组件，也许过虑器有很多
Object.keys(filters).forEach(function(k){
	return Vue.filter(k,filters[k])
})