vue2.0 过滤器用法

来源：互联网发布：送人钢笔推荐知乎编辑：程序博客网时间：2024/06/09 15:20

vue2.0取消了大部分过滤器，现在基本靠手写规则了。。

例如，以前的 limitBy 2 ，只显示数字的前两个数据，现在必须通过computer手写方法。如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <div id="box">        <ul>            <li v-for="(value,key) in arrFilter">                {{value}} {{key}}            </li>        </ul>    </div>    <script src="//cdn.bootcss.com/vue/2.1.10/vue.js"></script>    <script>        var vm=new Vue({            data:{                arr:['apple','banana','orange']            },            computed: {                arrFilter:function(){                    return this.arr.slice(0,2);                }            }        }).$mount('#box')    </script></body></html>

还有就是自定义过滤器了。。。例如希望过滤出来的数字都+1:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <div id="box">        {{a|add}}    </div>    <script src="//cdn.bootcss.com/vue/2.1.10/vue.js"></script>    <script>        Vue.filter('add',function(input){            return input+1;        })        var vm=new Vue({            data:{                a:1            }        }).$mount('#box')    </script></body></html>

最后再来一个当前时间过滤器。。。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <div id="box">        {{time | date}}    </div>    <script src="//cdn.bootcss.com/vue/2.1.10/vue.js"></script>    <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:{                time:Date.now()            }        }).$mount('#box')    </script></body></html>

0 0