vue 全局过滤器（单个和多个过滤器）及全局公共方法

一、单个过滤器

// 双花括号中
{{ message | capitalize }}
// 在v-bind 中
<div v-bind:id=" rawId | formatId"></div>

filters: {

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

}

二、多个过滤器

新建dfilter.js文件

/*
*封装过滤器
* */
const dfilters = {
    //日期过滤T
    riqiTime: function(value) {
        console.log(value)
        if (!value) return ''
        let gstime=value.replace('T', ' ')
        return gstime.substring(0,19);
    },
}


function fn1(val){
    console.log("全局方法1")
}
// 将四个全局公共方法，组合成一个对象，并暴露出去
export default{
    dfilters,
    fn1
}
// export default dfilters;

在main.js中引入并注册（在new Vue前注册）

//过滤
import dfilters from "./utils/dfilter"; // global filters
for (let key in dfilters.dfilters) {
    Vue.filter(key, dfilters.dfilters[key]);
}
//引入全局方法
Vue.prototype.commonApi = dfilters;

在组件中使用

<span>原价:¥{{shopgoods.gprice|riqiTime}}</span>


this.commonApi.fn1();