vue使用过滤器filter

72 阅读1分钟

全局使用:

建立一个filter.js文件

const vfilter = {
fmtDate: function (date, seprator) {
    date = new Date(date)
    let y = date.getFullYear()
    let m = date.getMonth() + 1
    let d = date.getDate()
    let h = date.getHours()
    let min = date.getMinutes()
    let s = date.getSeconds()
    return y + seprator + m + seprator + d + ' ' + h + ':' + min + ':' + s
}
}
export default vfilter

在main.js中引入

import vfilter from '@/common/filter.js'

然后在Vue实例注册前添加

// 1
for (let key in vfilter) {
    Vue.filter(key, vfilter[key])
}
// 2.
Vue.filter('filterTime', function(time, seprator) {
    console.log(typeof time);
    let y = time.getFullYear()
    let m = time.getMonth() + 1
    let d = time.getDate()
   let h = time.getHours()
    let min = time.getMinutes()
    let s = time.getSeconds()
    //  这个处理函数return 一个数据
       return y + seprator + m + seprator + d + seprator + h + seprator        + min + seprator + s
  })

最后在需要的页面使用

{{message | fmtDate('/')}}//message是一个参数, '/'是第二个参数

在单组件注册

如view.vue中 在export default {}中使用

filters: {
    capitalize: function (value) {
         if (!value) return ''
         return 1
    }
}