vue过滤器使用-单个参数和多个参数vue过滤器全局、局部自定义过滤器可以使用在两个地方：全局过滤器局部过滤器具体需求：

vue过滤器全局、局部

自定义过滤器可以使用在两个地方：

双大括号{{}}

v-bind 表达式

全局过滤器

//magFilter：过滤器名称
Vue.filter('magFilter', (value) => {
   //处理的业务逻辑
})

局部过滤器

filters: {  //定义局部过滤器
    magFilter(value) {  //magFilter过滤器名，value值
        //处理的业务逻辑
    },

具体需求：

实现过滤敏感字符

过滤器传入多个参数，实现求和运算

先看效果图

具体看代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- message:原始属性名
            magFilter:过滤器
        -->
        <p>{{message | magFilter}}</p>
        <input type="text" :value='java | handleAdd(php,css3)'>
    </div>
</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    // 全局过滤器
    Vue.filter('magFilter', (value) => {
        if (!value) {
            return ''
        }
        // 将值转换为字符串并全部转换成大写后将指定的值替换成***
        return value.toString().toUpperCase().replace('TMD', '***')
    })
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                message: '明天天气很好，你TMd来不来',
                java: 20,
                php: 22,
                css3: 33
            }
        },
        filters: {  //定义局部过滤器
            magFilter(value) {  //magFilter过滤器名，value值
                if (!value) {
                    return ''
                }
                // 将值转换为字符串并全部转换成大写后将指定的值替换成***
                return value.toString().toUpperCase().replace('TMD', '***')
            },
            handleAdd(n1, n2, n3) {  //handleAdd为过滤名
                return n1 + n2 + n3
            }
        },
    })
</script>
</html>