vue过滤器

1.全局过滤器

对一个页面的所有vue模块均能生效，参加以下代码：

 

<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
    <div id="app">
        <p> {{msg|myfilter}} </p>
        <input type="text" v-model="msg">
    </div>
    <div id="app1">

        <p> {{msg|myfilter}} </p>
            <input type="text" v-model="msg">      
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script>
        Vue.filter("myfilter", function (s) {
            return s.replace("框架", '123')
        });
        var vm = new Vue({
            el: '#app',
            data: { msg: 'Vue框架！！' },
            methods: {}
        });
        var vm1= new Vue({
            el: '#app1',
            data: { msg: 'Vue框架！！' },
            methods: {}
        });
    </script>
</body>
</html>

 myfilter  过滤器就是一个全局过滤器 ，对两个vue对象都起作用。

2.局部过滤器 ，即只对某个Vue对象其作用。

 

<div id="app">
        <p> {{msg|myfilter }} </p>
        <input type="text" v-model="msg">
    </div>
    <div id="app1">

        <p> {{msg|myfilter|fltr1}} </p>
            <input type="text" v-model="msg">      
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script>
        Vue.filter("myfilter", function (s) {
            return s.replace("框架", '123')
        });
        var vm = new Vue({
            el: '#app',
            data: { msg: 'Vue框架！！' },
            methods: {}
        });
        var vm1= new Vue({
            el: '#app1',
            data: { msg: 'Vue框架！！' },
            methods: {},
            filters: {

                fltr1: function (s) {
                    return s = s + "局部过滤器1";  //结果后追加字符串
                } 
            }
        });
    </script>

局部过滤器 就是在 某个vue 对象内部 声明 ，内部使用。

filter:{  

   过滤器名称:function ( arg0){  

    //具体操作     

}

  }

 以上  fltr1 只对vm1 其作用   ，vm 中使用会报错。

 

posted on 2021-10-17 21:13  码农at突泉  阅读(96)  评论(0)    收藏  举报