vue 注册全局的过滤器

1.编写一个全局的过滤器文件filter.js

function formatNumber(n) {
    const str = n.toString()
    return str[1] ? str : `0${str}`
}
function formatTime(date) {
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate()
    const hour = date.getHours()
    const minute = date.getMinutes()
    const second = date.getSeconds()
    const t1 = [year, month, day].map(formatNumber).join('/')
    const t2 = [hour, minute, second].map(formatNumber).join(':')
    return `${t1} ${t2}`
}

export  {
    formatTime
}

2.在main.js文件的vue实例之前引入过滤器文件

import * as globalFilter from './filters/filters'
for (var key in globalFilter) {
    Vue.filter(key, globalFilter[key])
}

3.使用过滤器时候直接引入过滤器文件的名字

<p>{{ time | dateServer }}</p> 

局部过滤器的使用

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

<!-- 在双花括号中 -->
{{ message | capitalize }}

注意： 当全局过滤器和局部过滤器重名时，会采用局部过滤器。