vue过滤器——vue全局过滤器，

一、全局过滤器

1、用法：

// 注册
Vue.filter('my-filter', function (value) {
// 返回处理后的值
})
// getter，返回已注册的过滤器
var myFilter = Vue.filter('my-filter')

2、例子：

filter_utils.js

let roleFilter = value => {
    let roleString = ''
    for (let i = 0; i < value.length; i++) {
        roleString = roleString + value[i].roleName + '、'
    }
    return roleString.substring(0, roleString.length - 1)
}
export {roleFilter}

main.js

import * as filters from './base/js/filter_util'


Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key])
})

xxx.vue

<p>{{scope.row.roles | roleFilter}}</p>

 

二、局部过滤器

<!-- 在双花括号中 -->
{{ 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)
    }
}