【10】vue.js — 过滤器

来源：互联网发布：超市销售量的数据编辑：程序博客网时间：2024/06/06 00:58

debounce延迟执行

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript" src="js/vue.js" ></script>    </head>    <body>        <div id="box">            <input type="button" value="点击" @click="show | debounce 2000" />        </div>    </body>    <script>        var vm = new Vue({            methods: {                show: function() {                    alert(1);                }            }        }).$mount('#box')    </script></html>

上述代码当我们点击【点击】按钮之后，页面会延迟2000毫秒执行show方法

filterBy过滤筛选

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript" src="js/vue.js" ></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>    </body>    <script>        var vm = new Vue({            data: {                arr: ['width','height','background','orange'],                a: ''            }        }).$mount('#box');    </script></html>

当我们在上述的input输入框中录入数据时，比如录入i，将会对arr数据进行筛选，筛选完后只有width和height

limitBy限制筛选数量

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript" src="js/vue.js" ></script>    </head>    <body>        <div id="box">            <input type="number" v-model="a" />            <ul>                <li v-for="val in arr | limitBy a">                    {{val}}                </li>            </ul>        </div>    </body>    <script>        var vm = new Vue({            data: {                arr: ['width','height','background','orange'],                a: 2            }        }).$mount('#box');    </script></html>

limitBy是对数据数量限制，我们还可以这样写
<li v-for="val in arr | limitBy 2 arr.length-2">，这样表示限制数量为2个但是从下标为arr.length-2(包含)开始。

orderBy排序

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript" src="js/vue.js" ></script>    </head>    <body>        <div id="box">            <input type="number" v-model="a" />            <ul>                <li v-for="val in arr | orderBy true">                    {{val}}                </li>            </ul>        </div>    </body>    <script>        var vm = new Vue({            data: {                arr: ['width','height','background','orange'],                a: ''            }        }).$mount('#box');    </script></html>

orderBy true：表示正序排列
orderBy false：表示倒序排列

自定义过滤器 — 使单位数据变为两位数

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript" src="js/vue.js" ></script>    </head>    <body>        <div id="box">            <ul>                <li v-for="value in arr">                    {{value | toDou 1 2}}                </li>            </ul>        </div>    </body>    <script>        Vue.filter('toDou',function(input,a,b) {            console.info('参数：a的值' + a + '和b的值' + b);            return input<10?'0'+input : ''+input;        });        var vm = new Vue({            data: {                arr: [1,2,3,11]            }        }).$mount('#box');    </script></html>

自定义过滤器 — 格式化时间

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript" src="js/vue.js" ></script>    </head>    <body>        <div id="box">            {{a | date}}        </div>    </body>    <script>        Vue.filter('date',function(input){            var oDate = new Date(input);            return oDate.getFullYear() + '年' + (oDate.getMonth() + 1) + "月"            +  oDate.getHours() + "点" + oDate.getMinutes() + "分" + oDate.getSeconds() + "秒";        });        var vm = new Vue({            data: {                a: Date.now()            }        }).$mount('#box');    </script></html>

vue.js自定义过滤器 - 格式化日期

自定义过滤器 - 获取html标签内的内容

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript" src="js/vue.js" ></script>    </head>    <body>        <div id="box">            {{msg | filterHTML}}        </div>    </body>    <script>        Vue.filter('filterHTML',function(input){            return input.replace(/<[^<]+>/g,'');        });        var vm = new Vue({            data: {                msg: '<strong>welcome</strong>'            }        }).$mount('#box');    </script></html>

阅读全文

0 0