在项目中使用vue过滤器小结

强调内容好记性始终不如一个烂笔头，平时工作中遇到问题时总能得到博客和群友的帮助，也希望自己写的东西能帮助别人吧，原理性的东西我不太清楚，我就尽量将使用方式和场景描述清楚一些，如果，中间有什么不对的，希望大伙提出来，共同进步。
前景：是这样的，很多时候我们在项目中会需要从后台获取到时间这个字段，像带有评论的会有用户的评论时间，发表文章的会有发表文章的时间，虽然都是时间，但是有的时候需求不会完全统一。有的只需要年月日，有的要精确到时分秒。我在项目中就正好遇到了这个问题，还有一个是路径的问题，比如，我们页面上的图片，音频，视频等这些外部资源，目前我们从后台上传的都不是全路径的，所以这个需要我们自己拼接，但是有的时候又是全路径的，不需要拼接，以图片为例，也就是同一个img标签的src它不紧要支持全路径还要支持非全路径的资源，但是这个东西后台一般不会给你做区分处理，前端可以获取到之后自己做处理，如果用传统方式解决就要加各种判断，如果页面上既有图片又有音频，甚至还有视频等，每种类型都要判断，很繁琐。但是vue给我们提供了一个非常好的工具filters，可以让我们很简单的解决这种问题。
一，时间过滤（不涉及传参的一种方式）：

后台返回的时间是包含年月日时分秒的，那么我们就写一个只包含年月日的过滤器就好了，js代码如下：

filters: {
            date() {
                var date = new Date(),
                    Y = date.getFullYear(),
                    m = date.getMonth() + 1,
                    d = date.getDate(),
                    H = date.getHours(),
                    i = date.getMinutes(),
                    s = date.getSeconds();
                if(m < 10) {
                    m = '0' + m;
                }
                if(d < 10) {
                    d = '0' + d;
                }
                if(H < 10) {
                    H = '0' + H;
                }
                if(i < 10) {
                    i = '0' + i;
                }
                if(s < 10) {
                    s = '0' + s;
                }
                var t = Y + '-' + m + '-' + d;
                return t;
            },
        },

html部分就很简单了，将需要过滤的字段旁边加个管道标识符，然后在标识符右边写上过滤方法就ok啦：<div class="right">{{item.createTime|date}}</div>
如果你们的需求和这个不完全一样，只需要对应的简单修改下date方法就行了。
二，路径过滤（涉及传参的形式）：
需要自己拼接的写法html：

<img src="../assets/image/img_article.png" alt=""  
v-if="subject.image===''||subject.image==='null'"/>
<img :src="imgUrl+subject.image" alt="" v-if="subject.image !== ''&&subject.image!=='null'"/>

对应的js:

data() {
            return {
                imgUrl:" http://app.chuxinketing.com/api/",
            };
        },

在这种写法上，如果后台返回的图片本身就是一个全路径的链接，比如：http://app.chuxinketing.com/api/123.jpg,在拼上imgUrl,就变成了http://app.chuxinketing.com/api/http://app.chuxinketing.com/api/123.jpg。这种是无法正确打开图片的，你可以自己在浏览器中打开尝试一下，所以这时候，过滤器又变成了了一个化繁为简解决问题的小能手。我们只需要这么做：

<img src="../assets/image/img_avatar.png" alt="" 
v-if="item.image===''||item.image==='null'" />
<img :src="item.image|urlFilter(imgUrl)" alt="" v-if="item.image !== ''&&item.image!=='null'"/>

在filters中添加一个urlFilter方法：

filters:{
          urlFilter(value,imgUrl){
                const self = this;
                if (value) {
                    let include = value.indexOf("http");
                    if (include > -1){
                        return value;
                    } else {
                        return imgUrl+value;
                    }
                }
            },
}

注意，urlFilter()方法中的value其实就是后台返回的被过滤对象。这个大伙可以自己用chrome等调试工具断点调试哦，这样是不是就就轻松解决啦。另外，细心的小伙伴可能会发现为什么，要写两个img标签呢，其实，仔细看就会发现，第一个img标签的src前面没有“：”，而且图片路径也是一个固定的图片，其实这是为了提高用户体验所做的优化，如果后台没有返回图片，像一些需要用户上传头像的地方，如果用户没上传之类的，就可以用一张默认图片展示了。