15_尚硅谷_Vue_过滤器

呃，我们下一个讲的是一个概念，叫过滤器。嗯，它是一个什么样的技术呢？其实是对我们要显示的数据进行格式化的一个技术，譬如说我们要去显示一个东西叫什么呢？日期，大家知道平常我们日期是怎么表达的了，在程序里面就是当前的时间啊，到1970年1月1号。00:00:00的一个什么呢？时间差。对吧，也就是说它是个数字。非常大啊，但这个数值四个人看了都不知道是哪一天。能懂吧，所以我们啊，有了一个数值以后，最终我们要去以这样的形式是不是去展现。而且最好是我能够去自己指定格式。听到吗？譬如说我要显示完整的，我要显示年月日，我要显示十分秒。

是不是都可以啊。好，所以来看一下啊，这个地方它就有个概念叫自定义过滤器。啊，这个过滤器的使用，先看一下使用比较有意思。啊，假设呢，我手里面现在有一个日期。那直接这样写的肯定不行。啊，后面呢，就指定一个概念叫什么呢？啊，过滤器的名字。其实一个过滤器呢，对于一个处理函数。这个处理函数会接收你这个表达式的值，给你返回一个什么新的值，而这个新的值格式就非常好。能懂吧，啊，就是一个处理函数，我们照着它的这个呢来去做一下啊，首先我们要去有个概念叫什么定义过滤器。

来把一些基本的我们先准备准备啊，把基本代码先准备准备啊，这是一个井号test，接着有一个date，好，假设我有一个save。属性来去指定当前的时间，怎么指定呢？非常简单，六一个date。啊，都可以啊，这就是一个对比对象。能看到吧，啊OK，好，我把这个date呢，我直接显示一下，看一下是一个什么样的效果啊。直接写什么小写。这个名字我可以随便写吧，啊好，我们来看一下现有的是一个什么样，是这个样子。好像东西也有是吧，这不都有嘛是吧，但是这种显示的方式让人受不了啊是吧，啊，中国人完全受不了啊，我们喜欢的是连日用什么连接啊，用一个小杠是吧，十分秒用什么连接冒泡。

就中国人的习惯就是这样的吧，好，那此时我们就要用到一个技术了，叫什么过滤器。那过滤器首先得有一个概念叫自定义过滤器，对吧？把定义一个过滤器通过谁来定义呢？U好。你说这个filter是谁的方法？你怎么去跟人表达他是什么？啊。那你的方法是谁的？谁的？是view的，那这个view现在是一个什么东西啊。啊，你要说现在我通过view函数对象，它的非方法这个另一个概念函数对象。

为什么叫函数对象？大家喜欢看又是不是函数，但他现在作为什么样的角色在使用，等一下。你说这个话的时候他就知道了啊，首先它是个函数。对吧，但现在呢，我在使用它的是不是对象这个角色的功能，因为我点嘛。是作呀，是对象使用，并没有作为函数使用吧。啊，OK，这里有个概念一定要知道啊，函数对象A听就知道怎么回事了，你说一个函数或者说一个对象都不太好。啊，下面。直接两个东西，一个叫过滤器，你的过滤器的名字，这个名字呢，得根据你的意义来去取一个对应的名字。譬如说举个例子。我们来一个。可以吧？

可以啊，或者是你要想简单一点也可以，这样都行是吧？嗯，大家看得懂，下面处理函数接收一个value，而这个value是谁呢？就是将要被进行格式化的数据，说白了就是它的值。对吧，就它的值就这个。看到吗？好，下面我最终是不是要返回一个新的值。对吧，现在问题就是啊，我如何将它格式化了，对吧？啊，先放着我们先用一用啊，假设我已经好了。那我怎么用呢？来看到来个P标签对吧？啊，这一次啊，我们指定是完整的啊完整版，什么完整版就是年月日十分秒都有，好这么写的啊先我要显示的是贝塔对不对。

接着来一个竖线啊，中间有空格最好啊，接着指定过滤器的名字。看到没？这语法相对来说还是比较简洁的啊，好。下面啊，一旦你这么写了以后，它就会将这一个表达式的值传给这个函数，去取这个返回值来显示。大概流程听懂吧，好，现在有个问题。是吧，如何格式化呀。Google机器格式化吗？好像没有是吧，没关系。来一个不。啊，有一个库呢，叫moment。啊，OK。你看这个时钟，你就应该知道它是用来干嘛的，对吧？OK，大家如果去get up上面去搜，你会发现啊。

这个关注量还是非常非常大的。看。36K什么概念？大家如果能写一个，你能写一个东西，关注量能达到100，你找工作都不费劲了。这个100和36K是好几个等量级的差距是吧？OK啊，你找，但是有人说老师那才有意了，上个班下个班是吧，呼噜呼噜不就100了吧，我说正常的，只是你不做任何推广啊，最后别人找到你这个位置了是吧，给你标了一个心。啊，这个能达到100那都不容易。啊OK，你说去像这样去找同学，那那肯定可以啊，OK。嗯。好，呃，它呢，并不是说功能有多强大，其他功能还是相当于说就是做一个日期格式化。

但为什么有这么大的关注量呢？因为常用一个库啊，它并不是说功能要多强大是吧，而是他做了这个事吧，大家都需要。能懂吗？啊，这个时候一般的项目里面都会需要日期格式化的功能。所以啊，它就会用的比较多了。那怎么用呢，对吧。啊，首先大家需要去得到这个库吧。得到这个库呢，我们这种方式现在我们不用，我们要在页面里面引入一下。怎么引入一个moment呢？这个地方可以用一下什么CDN。哎，我的CDN呢。有吗？啊，Boot c dn是吧。下子眼花流了，好了，来看一下，嘟嘟嘟嘟嘟嘟，哎，是不是这里啊，这什么意思，这就是说最最常用的一些库，它给你摆在台面上是吧，那你选那说啥呀，选它呀。

啊哎，好，但这个吧，它的这个列的不太好，前面不是我们想要的。它在一个靠下的位置，但是它的前面的这种乱七八糟的太多了。我们要的是后面一个A。就这。能懂吗？或者我们如果如果不需要测出来用这个也行是吧，能看懂吧，啊就这个链接把它直接。来一个report啊，走，你来个他。能看到吧，好，那下面怎么用呢？是不是得看文档是吧。下面这是一个用法，好，来拿到它啊。诶。

看见谁？看见V，好，再来看一下这个里面moment的括号，这个是啊，得到一个调用它的这个函数，最终这个函数返回的应该是个对象吧，这个对象去干嘛去。不，其实他是准备对当前时间进行格式化。而我不是，我是要对这个value进行格式化，所以我应该干嘛？这个应该能想到吧。那也就是说对指定的时间是不是进行格式化，那关键是格式化，为什么格式呢？是不是后面就要指定什么格式，但是明显这个格式好像不太不太对，我们需要中间有杠有冒号的对不对了吧？好，那我到底该怎么写才好呢？啊。这个得去看一个东西。文档对吧，文档里面呢，会有详细的语法，那我直接找啊。

啊，肯定如果是第一次用，你怎么可能老师你怎么知道一下子往上面找呢，那肯定是慢慢的从上面看一下哪位置合适嘛，那现在时间所迫，所以我们直接找到对应的位置。啊，先来个这个年月日能看到吧，好，那我们这地方诶有这两种，有四个Y的，有两个Y的啥意思哦。比如说2018年。一八年。那我们是需要什么？2018年来个杠。是吧，好接着多少月，这个月吧，有两个M有一个M呢，区别在哪呢。就在于如果我是一个比如说五月。五月是五了还是零五对吧？OK，五它有一个问题，就是有的时候你的整个格式的宽度不一致，不一定一样。

能懂吗？如果你总是写这个，那无论你是五月还是十月，都是两位。这样能保证你显示的宽度是一样的。这能不懂，当然有人说老师我们我们公司就想要M，那行，那MM没关系，那么这不是绝对的，或者说你们公司就想显示一八年，那就一八年是不对，这没任何问题嘛，啊，是可以指定的啊好往下。啊，往下就是日是吧，日呢，这里有D和DD，这是一个意思吧，啊，就用DD吧，风格一致，好诶中间应该有个空格吧。年月日十分秒进行空格嘛，好，下面十分秒在下面这个位置小时这个地方有大H有小H。

啊，说白了有，这里有24小字，有什么呢？12小字。能懂吧，那我用24小时是吧，就这一个好接着冒号是吧，冒号好了。分。啊，这个。MM是吧，好秒大写小写。打开一下。应该是小写吧，多少秒多少秒这个地方是，呃，这个是什么？大写的S是毫秒啊，这是毫秒的意思吗？这是个啥呀？看一下单词啊，不知道看单词呗，百分之多少秒。好像这个是比较靠谱的，这个明显就说的秒是不是，那我用它呗，四真四才知道嘛。这个直接说的秒吗？这个地方啊，大写千万不要写错了，你要写小写YY那肯定不对，你说老师这我了记得住不用记住记住干那干啥，这有时候记东西啊，不一定是好什么好事。

因为脑子的存储容量有限啊。啊来我们来看一下，看看我们当前的这个啊，好没好啊。各位可以好，现在呢，关键是我还有别的需求，我还希望能够显示年月日。啊OK，就显示连日不要显示十分秒，或者说我就想显示分秒。是吧，有可能有这种需求啊。但现在我能做到吗？有人说老师改呀，关键你咋改呀，你。是不是也就是说这一个。假设我的默认就是完整版可以吧，默认就是完整版，那如果要显示年月日，如果要显示十分秒，你得特别的指定，是不是，如何来特别的指定呢？这个地方它可以加个括号来指定。

你的格式。譬如说你就指定这个，当然你肯定不能指定错啊，能看懂，或者说你来指定什么呢这个。这个应该能懂啊，这个能看懂吧，好，那这个格式呢，就会通过它。通过第二个参数啊，你可能传多个嘛，如果你传一个参数，这里面传一个，那就是第二个参数传过来，假设格式这里面就有一个at这个，你说这个这个单词可以是个名词，也可以是个动词。如果是名词是格式，如果是动词格式化。啊OK，而现在我传的参数叫格式的意思对不对？好，请问现在我需求什么呢？如果你传了，如果你传了格式，那我是按照你的格式去格式化，如果你没传呢。

就这个。这咋做？对吧，如果传了用它，如果不传用这个。用if else能不能写？可不可以，可以，你说我直接这么干行吗？这干什么？不行，他万一没传呢，那不废了吗？No，不，No。当你就可以判断，如果有就用这个对不对，如果没有是不是用用下一个太多了。什么意思？如果有值是不是用了它是不是右边忽略掉了，如果没值，用哪边的右边的。

那不就好了吗？这个是不能简化一分二啥可以啊。找你。可以可以了吧，可以啊。嗯，这样就搞定了。