强调内容好记性始终不如一个烂笔头,平时工作中遇到问题时总能得到博客和群友的帮助,也希望自己写的东西能帮助别人吧,原理性的东西我不太清楚,我就尽量将使用方式和场景描述清楚一些,如果,中间有什么不对的,希望大伙提出来,共同进步。
前景:是这样的,很多时候我们在项目中会需要从后台获取到时间这个字段,像带有评论的会有用户的评论时间,发表文章的会有发表文章的时间,虽然都是时间,但是有的时候需求不会完全统一。有的只需要年月日,有的要精确到时分秒。我在项目中就正好遇到了这个问题,还有一个是路径的问题,比如,我们页面上的图片,音频,视频等这些外部资源,目前我们从后台上传的都不是全路径的,所以这个需要我们自己拼接,但是有的时候又是全路径的,不需要拼接,以图片为例,也就是同一个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前面没有“:”,而且图片路径也是一个固定的图片,其实这是为了提高用户体验所做的优化,如果后台没有返回图片,像一些需要用户上传头像的地方,如果用户没上传之类的,就可以用一张默认图片展示了。

Logo

前往低代码交流专区

更多推荐