vue 过滤器

过滤器:
vue1.0 提供过滤器:

系统就自带很多过滤 capitalize uppercase currency json.... 
{{msg | currency}}
{{msg | json}}
....
limitBy
filterBy
.....
一些简单功能，自己通过js实现

debounce 配合事件，延迟执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>

    </script>
</head>
<body>
    <div id="box">
        <input type="text" @keyup="show | debounce 2000">
    </div>
    <script>

        var vm=new Vue({
            data:{

            },
            methods:{
                show:function(){
                    alert(1);
                }
            }
        }).$mount('#box');

    </script>
</body>
</html>
@keyup="show | debounce 2000"

 


数据配合使用过滤器:
limitBy 限制几个
limitBy 参数(取几个)
limitBy 取几个 从哪开始

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>

    </script>
</head>
<body>
    <div id="box">
        <ul>
            <li v-for="val in arr | limitBy 2 arr.length-2">
                {{val}}
            </li>
        </ul>
    </div>
    <script>

        var vm=new Vue({
            data:{
                arr:[1,2,3,4,5]
            },
            methods:{

            }
        }).$mount('#box');

    </script>
</body>
</html>
v-for="val in arr | limitBy 2 arr.length-2"

 

filterBy 过滤数据
filterBy ‘谁’

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>

    </script>
</head>
<body>
    <div id="box">
        <input type="text" v-model="a">
        <ul>
            <li v-for="val in arr | filterBy a">
                {{val}}
            </li>
        </ul>
    </div>
    <script>

        var vm=new Vue({
            data:{
                arr:['width','height','background','orange'],
                a:''
            },
            methods:{

            }
        }).$mount('#box');

    </script>
</body>
</html>
v-for="val in arr | filterBy a"
li v-for="val in arr | filterBy 'w'"

 

orderBy 排序
orderBy 谁 1/-1


1 -> 正序
2 -> 倒序

自定义过滤器: model ->过滤 -> view

Vue.filter(name,function(input){

});

 

时间转化器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>

    </script>
</head>
<body>
    <div id="box">
        {{a | date}}
    </div>
    <script>
        Vue.filter('date',function(input){
            var oDate=new Date(input);
            return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();
        });

        var vm=new Vue({
            data:{
                a:Date.now()
            },
            methods:{

            }
        }).$mount('#box');

    </script>
</body>
</html>
.filter('date',function(input){}）

 

双向过滤器:*


model -> view（数据 -> 视图）

view -> model

Vue.filter('filterHtml',{
    read:function(input){ //model-view
        return input.replace(/<[^<+]>/g,'');
    },
    write:function(val){ //view -> model
        return val;
    }
});

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        //<h2>welcome</h2>
        Vue.filter('filterHtml',{
            read:function(input){ //model-view
                alert(1);
                return input.replace(/<[^<]+>/g,'');
            },
            write:function(val){ //view -> model
                console.log(val);
                return val;
            }
        });
        window.onload=function(){
            var vm=new Vue({
                data:{
                    msg:'<strong>welcome</strong>'
                }
            }).$mount('#box');
        };

    </script>
</head>
<body>
    <div id="box">
        <input type="text" v-model="msg | filterHtml">
        <br>
        {{{msg}}}
    </div>
</body>
</html>
t.replace(/<[^<]+>/g,'')

 vue2。0 

 

 

到了2.0， 内置过滤器，全部删除了


lodash 工具库 _.debounce(fn,200)


自定义过滤器——还有
但是,自定义过滤器传参

之前: {{msg | toDou '12' '5'}}
现在: {{msg | toDou('12','5')}}

posted @ 2018-10-07 11:49  永醉雨辰  阅读(179)  评论(0)  编辑  收藏  举报