vue2.0自定义过滤器

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

Vue.filter(id,[definition])
参数
{string} id
{Function} [definition]

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

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

过滤器串联

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

在组件内部定义

methods:{
 filters:{
  capitalize:function(){}
}
}

全局定义过滤器

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

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

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进去，注册

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