005 V 过滤器

不二如是

                               
登录/注册后可看大图

上一讲我们搞定了插值和表达式，本次来学习过滤器。

Vue支持在“{{}}”的尾部添加一个管道符"|"对数据进行过滤。

经常用于文本，比如字母全部大写，货币数字三位一个逗号分割等。

过滤的规则是自定义的，通过给Vue实例添加选项filters来设置。

就拿上一节的时间：

                               
登录/注册后可看大图

格式很诡异哈，我们通过过滤器对其进行格式化处理。

先修改div：

1. <div id="myA">{{time | formDate}}</div>

复制代码

然后修改代码，新增一个变量：

1. var newDate = function (value) {
   
2.         return value <10 ? '0' + value:value;
   
3.     }

复制代码

修改Vue实例：

1. var app = new Vue({
   
2.         el: "#myA",
   
3.         data: {
   
4.             time: new Date()
   
5.         },
   
6. //        添加过滤
   
7.         filters:{
   
8. //            value就是要被过滤的值
   
9.             formDate:function(value){
   
10.                 var date = new Date(value);
    
11.                 var year = date.getFullYear();
    
12.                 var month = newDate(date.getMonth()+1);
    
13.                 var day = newDate(date.getDate());
    
14.                 var hours = newDate(date.getHours());
    
15.                 var minutes = newDate(date.getMinutes());
    
16.                 var seconds = newDate(date.getSeconds());
    
17. //                见处理好的时间格式返回出去
    
18.                 return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
    
19.             }
    
20.         },
    
21.         mounted: function(){
    
22.             var _this = this;
    
23.             this.timer = setInterval(function () {
    
24.                 _this.time = new Date();
    
25.             }, 1000);
    
26.         },
    
27.         beforeDestroy: function () {
    
28.             if (this.timer) {
    
29.                 clearInterval(this.timer);
    
30.             }
    
31.         }
    
32.     })

复制代码

过滤器写法还可以串联：

1. {{msg|filter1|filter2}}

复制代码

还可以接受参数：

1. {{msg|filter('arg','arg1')}}

复制代码

过滤器应用用于处理简单的文本格式，如果要实现更复杂的会用到后续我们要介绍到的“计算属性”。

---

课后作业


1、过滤器用来干什么？

2、过滤器可以串联写多个过滤条件吗？（T/F）



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

差点夹不住屁

已学习,谢谢老板

Ruide

处理简单的文本格式数据
T

优时风

1

一笙彤

0

suweixuan1998

对数据进行过滤。
T

kmq116

开始迷惑了

HanYanShuang

学习

kykio

围观