vue2.0 过滤器用法_综合

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>