在项目中使用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前面没有“：”，而且图片路径也是一个固定的图片，其实这是为了提高用户体验所做的优化，如果后台没有返回图片，像一些需要用户上传头像的地方，如果用户没上传之类的，就可以用一张默认图片展示了。

在项目中使用vue过滤器小结相关推荐

webpack项目中使用vue
webpack项目中使用vue 第一步:运行 npm i vue –S 安装vue 第二步:在src->index.js入口文件中,通过 import Vue from 'vue' 来导入vue ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
Struts项目中引入了过滤器filter后出现中文乱码情况
问题描述:在Struts项目中需要引入自定义的过滤器,但是引入以后项目中出现了中文乱码现象解决办法: 第一步:在web.xml中引入过滤器的配置,如下所示,注意自定义的过滤器filter标签一定要在 ...
寻找项目中顶级Vue对象 (一)
个人博客首发博客园: www.cnblogs.com/zhangrunhao- 参考感谢作者从一个奇怪的错误出发理解 Vue 基本概念安装 - Vue.js 渲染函数 - Vue.js Vue2 ...
Jquery项目中使用vue.js和element-ui
大家在工作的情况中,可能会遇到之前的老项目采用jq书写,或者修改或者新增功能在jq中,原始jq的项目,代码可维护性很差,一个页面几千行jq,可维护性很差,工作量巨大,所以这个时候大家可以引入vue.j ...
vue2/3项目中使用Vue Carousel 3D实现 Carousel 3D 轮播
项目需求大概是这个样子,这种并不能通过围成一周再旋转父级实现,因此图方便选择了组件轮播 vue2,可以直接使用 Playground - Vue Carousel 3D - 3D Carousel ...
vue项目中app.vue 、main.js和 index.html的关联
1.main.js是我们的入口文件,主要作用是初始化vue实例并使用需要的插件. import Vue from 'vue' import App from './App'/* eslint-disa ...
cli vue 外部js 引入文件_javascript - vue cli构建的项目中，vue组件里怎么引入外部js文件里的方法...
问题我想在content组件里调用外部js(test.js)里的diyfun方法,怎么实现呢? 我的content组件代码: Click export default { data () { re ...
vue 打开html流_在vue项目中添加一个html页面，开启本地服务器
在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...

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

在项目中使用vue过滤器小结相关推荐

最新文章

热门文章