vue学习自定义过滤器篇(四)

自定义过滤器

• 将学会
  • 过滤一些不文明用语
  • 让data和view不一致
  • 全局和私有过滤器(局部)
  • 过滤器的使用:过滤器+管道符(|)

  (1)全局过滤器

  • 每个实例都可以使用的过滤器

  ①单过滤器

  • 三步骤(引入,实例,渲染)
  • 使用

<div id="app">
    <h1>{{msg| test}}</h1>
</div>
<script>
    Vue.filter("test",function (info){
        return info.replace(/热心/g,"忠实");
    })
    new Vue({
        el:"#app",
        data:{
            msg:"我是一个热心的粉丝,有一颗热心的心肠"
        },
    })
</script>

• 预览
  

②多过滤器

• 三步骤
• 使用

<div id="app">
    <h1>{{msg| test | test1}}</h1>
</div>
<script>
    Vue.filter("test",function (info){
        return info.replace(/热心/g,"忠实");
    });
    Vue.filter("test1",function (info){
        return info.replace(/忠实/g,"优秀+1");
    })
    new Vue({
        el:"#app",
        data:{
            msg:"我是一个热心的粉丝,有一颗热心的心肠"
        },
    })
</script>

• 预览
  

③ 指定过滤器(传参)

• 三步骤
• 使用

<div id="app">
    <h1>{{msg| test | test1("优秀+2")}}</h1>
</div>
<script>
    Vue.filter("test",function (info){
        return info.replace(/热心/g,"忠实");
    });
    Vue.filter("test1",function (info,params){
        return info.replace(/忠实/g,params);
    })
    new Vue({
        el:"#app",
        data:{
            msg:"我是一个热心的粉丝,有一颗热心的心肠"
        },
    })
</script>

• 预览
  

  (2)私有过滤器(实例自享)

  • 三步骤
  • 使用

new Vue({
        el:"#app2",
        data:{
            msg:"我是一个热心的粉丝,有一颗热心的心肠"
        },
        filters:{
            "test3":function (info){
                return info.replace(/我/g,"你");
            }
        }
    })

• 预览
  
  注意:只能在app2中使用,这是私有过滤器