vue 过滤器

Posted 2021-01-11 zyjzz

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 过滤器相关的知识，希望对你有一定的参考价值。

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

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,‘‘)

以上是关于vue 过滤器的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段2——.vue文件的模板