首页 > 代码库 > vue教程2-06 过滤器

vue教程2-06 过滤器

2024-09-17 19:05:17   214人阅读

vue教程2-06 过滤器

过滤器:
vue提供过滤器:
capitalize uppercase currency....

<div id="box">
        {{msg|currency ￥}}
    </div>

 

debounce 配合事件，延迟执行

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

 

 

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

<div id="box">
        <ul>
            <!--取2个-->
            <li v-for="val in arr | limitBy 2">
                {{val}}
            </li>
            <br/>
            <br/>

            <!--取2个，从第arr.length-2个开始取-->
            <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>

 

filterBy 过滤数据
filterBy ‘谁’

<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>

 

orderBy 排序
orderBy 谁 1/-1
1 -> 正序
2 -> 倒序

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

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

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

    </script>

 

自定义过滤器: model ->过滤 -> view
Vue.filter(name,function(input){

});

<div id="box">
        {{a | toDou 1 2}}
    </div>
    <script>
        Vue.filter(‘toDou‘,function(input,a,b){
            alert(a+‘,‘+b);
            return input<10?‘0‘+input:‘‘+input;
        });
        var vm=new Vue({
            data:{
                a:9
            },
            methods:{

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

    </script>

技术分享

 

 

时间转化器

<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()//返回1970 年 1 月 1日午夜与当前日期和时间之间的毫秒数。
            },
            methods:{

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

    </script>

 

过滤html标记

双向过滤器:*
Vue.filter(‘filterHtml‘,{
　　read:function(input){ //model-view
　　　　return input.replace(/<[^<+]>/g,‘‘);
　　},
　　write:function(val){ //view -> model
　　　　return val;
　　}
});

数据 -> 视图
model -> view

view -> model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
    <script src="http://www.mamicode.com/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 | filterHtml}}
    </div>
</body>
</html>

 

vue教程2-06 过滤器


联系
我们