Vue值过滤器(filter)

Vue过滤器(filter)

---

过滤器只是过滤数据，并不会修改原始数据，只是过滤掉不想要的数据

1.全局过滤器

(1).无参全局过滤器

1. 语法Vue.filter() 类似于定义全局组件

• 第一个参数也是名称，过滤器的名称
• 第二个参数是过滤器的功能函数

   Vue.filter('global-filter', function(msg) {
   //过滤敏感词汇
        return msg.replace(/sb/g, '萌萌')
    });

2. 插值表达式中使用过滤器

    <p>{{msg | global-filter}}</p>

(2).有参全局过滤器

1. 参数写在插值表达中过滤器的后面

    <p>{{msg | global-filter('一个','好人')}}</p> 

2. 功能函数中除了第一个参数， 其他对应的都是插值表达式中的参数

 Vue.filter('global-filter', function(msg,arg,arg1) {
        return msg.replace(/sb/g, arg+arg1);
    });

全部代码

<div id="first">
    <p>{{msg | global-filter('一个','好人')}}</p>
</div>

<script>
    Vue.filter('global-filter', function(msg,arg,arg1) {
        return msg.replace(/sb/g, arg+arg1);
    });
    let vm=new Vue({
        el:"#first",
        data:{
            // 屏蔽脏话 ，变成好人卡
            msg:'你是sb'
        }
    })

</script>

2.局部过滤器

局部过滤器 有参数和无参数与全局相同， 与全局的主要区别是，局部定义在Vue实例中，作用区域也只是在当前Vue实例控制的区域

Vue实例vm2不可以调用在vm中定义的局部过滤器

<div id="first">
    <p>{{msg | localFilter('一个','好人')}}</p>
</div>
<div id="second">
    <!-- Vue会报错-->
    <p>{{msg2|  localFilter('一个','好人')}}</p>
</div>

<script>


    let vm=new Vue({
        el:"#first",
        data:{
            msg:'你是sb'
        },
        filters:{
            localFilter(msg,arg,arg2){
                return msg.replace(/sb/g, arg+arg2);
            }
        }
    });
    let vm2=new Vue({
        el:"#second",
        data:{
            msg2:'你是憨p'
        }
    })

</script>

但是全局变量可以在不同的Vue实例中使用

<div id="first">
    <p>{{msg | localFilter('一个','好人')}}</p>
</div>
<div id="second">
    <p>{{msg2|  globalFilter('一个','好人')}}</p>
</div>

<script>

    Vue.filter('globalFilter',function(msg2,arg,arg1){
        return msg2.replace(/憨p/g, arg+arg1);
    });


    let vm=new Vue({
        el:"#first",
        data:{
            msg:'你是sb'
        },
        filters:{
            localFilter(msg,arg,arg2){
                return msg.replace(/sb/g, arg+arg2);
            }
        }
    });
    let vm2=new Vue({
        el:"#second",
        data:{
            msg2:'你是憨p'
        }
    })

</script>