Vue 过滤

Vue 过滤

• 全局定义

{{upper|toUpper}}
Vue.filter('toUpper', function (value) {
    return value.toUpperCase()
})

• 局部定义

{{lower|toLower}}
var app = new Vue({
    el: '#app',
    data: {
        upper: '',
        lower: ''
    },
    filters: {
        toLower(value) {
            return value.toLowerCase()
        }
    }
})

Vue过滤.png

• 过滤器串联

过滤之后的值会依次传入到下一级过滤器中

{{upper|toUpper|addSuffix}}
    Vue.filter('toUpper', function (value) {
    return value.toUpperCase()
})
var app = new Vue({
    el: '#app',
    data: {
        upper: '',
        lower: ''
    },
    filters: {
        addSuffix(value) {
            if (value) {
                return value + '@zhiliao.com'
            }
        }
    }
})

过滤器串联.png