记录一下在methods中调用全局过滤器

最新推荐文章于 2022-08-04 15:04:48 发布
最新推荐文章于 2022-08-04 15:04:48 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： vue fifter过滤器 文章标签： fifter过滤器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ju__ju/article/details/107403771
版权

项目中有用到上传图片,上传后返回路径如下图所示,并没有返回https://xxx类似这种,而是返回一种相对路径,

在这里插入图片描述
这时候一般在main的js中定义一个全局过滤器,如下图
在这里插入图片描述
而使用起来也很方便 以avue组件库举例

<avue-avatar  shape="square" :alt="row.imgUrl" :size="64"  :src="row.imgUrl | filterUrl>L</avue-avatar >

直接在src后面加| filterUrl就行了

但是如果是需要在methods中使用的话,很明显这个方法是不行的
于是我们可以这样使用this.$options.filters['filterUrl'](url)这个url中填返回的相对路径就行了
在这里插入图片描述
题外话:因为我这边需要用到上传图片的回显,所以才需要在file-list中让这个图片显示出来,如果想了解,可以搜一下相关博客对于回显的处理,这里不多做解释
在这里插入图片描述

橘哥哥
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue定义和使用全局过滤器
agua001的博客
11-30 248
第一步：新建一个文件filters.js(专门写过滤函数) const vfilter = { // 标签类型 cusType: function (value) { switch (String(value)) { case '100': return '主持人' break; case '101': return '个人代理' break; default: return
Java中的方法2020年
浮华′的博客
11-09 126
文章目录一、方法概述二、方法调用过程三、方法的定义四、HelloWorld案例的编写四、HelloWorld案例常见问题 一、方法概述 方法（method）是将具有独立功能的代码块组织成为一个整体，使其具有特殊功能的代码急。 注意： 方法必须先创建才可以使用，该过程称为方法定义。 方法创建后并不是直接运行的，需要手动使用后才执行，该过程称为方法调用。 二、方法调用过程 main方法与自定义方法的执行顺序 main方法先执行 方法调用的过程 main方法先被调用，随后执行main方法中的逻辑代码，当
Vue之在methods中使用filter的方法
热门推荐
Guoye的专栏
09-05 1万+
Vue之在methods中使用filter的方法全局定义filter在html使用filter在methods使用filter 相关资料： 过滤器(Vue官方使用说明) 全局定义filter 在main.js或者其他定义全局filter Vue.filter('capitalize', function (value) { if (!value) return '' value = v...
Vue-Methods中使用Filter
weixin_34363171的博客
12-28 230
1.Vue中Filter声明方式 Vue中存在两种声明Filter过滤器的方式: 　　1.全局过滤器 Vue.filter('testFilter1',function(val){ console.log("全局过滤器",val); }) 这种方式将过滤器声明到了Vue类型上,所有Vue对象即可访问这个过滤器 ...
在Vue methods中调用filters里的过滤器实例
10-18
今天小编就为大家分享一篇在Vue methods中调用filters里的过滤器实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决跨域过滤器CORSFilter
最新发布
12-23
为了解决这个问题，我们可以使用CORS（Cross-Origin Resource Sharing，跨源资源共享）机制，而CORSFilter则是实现这一机制的一种过滤器。本文将详细介绍CORSFilter的原理、配置以及如何在实际项目中应用。 ...
vue指令v-html使用过滤器filters功能实例
12-13
然而，现在不能使用了，Vue2.0 的过滤器现在只能应用在 {{ }} 和 v-bind 中。 然而，嫌麻烦，还想使用怎么办？ 解决方法 使用全局方法 使用 computed 属性 使用 $options.filters 使用全局方法 put your ...
利用SpringMVC过滤器解决vue跨域请求的问题
08-28
SpringMVC过滤器解决vue跨域请求的问题 SpringMVC框架提供了一种灵活的机制来处理HTTP请求，即 HandlerInterceptor。HandlerInterceptor是一个接口，用于在SpringMVC中对请求进行拦截和处理。通过实现...
Vue中使用全局过滤器
Amelian的博客
12-09 2308
1.自定义全局时间过滤器 1.1 首先在mian.js入口文件中定义全局过滤器如下（全局定义，则任何一个组件可以使用） //定义时间格式化的过滤器，用于将毫秒转换为标准格式的时间 Vue.filter('dateFormat', function (originValue) { //将需要过滤的日期转成日期格式 const dt = new Date(originValue) //获取年份 const y = dt.getFullYear() //获取月份，不足两位的前面将以0补齐
VUE 定义全局过滤器及使用方法
不想成为可以改变世界的程序员，不是一个好程序员
02-24 3968
VUE 定义全局过滤器及使用方法。为什么使用全局过滤器？有什么好处？什么场景下适用全局过滤器？
14_vue全局过滤器filter的使用
最爱嫣夜来
10-31 442
1、全局过滤器filter如何定义 通过Vue的过滤器方法Vue.filter('过滤器名', function(args){})进行定义 定义全局过滤器的语法如下： Vue.filter('filter_name', function(args){ }) 2、如何调用全局过滤器filter 定义成功后，在需要使用的地方(过滤变量)使用{{ user|toLowerCase }}进行调用...
vue在方法里如何使用过滤器（在methods函数里使用filters）
jeesr的博客
08-04 2745
我们知道在模板里可以这样方便的使用vue过滤器：{{ value | filter}}，但是如果要在methods方法里也要使用这个定义好的过滤器filter，该怎么使用呢？
如何在vue上全局使用过滤器filter
weixin_44823384的博客
03-28 1783
如何在vue上全局使用过滤器filter 在src下新建文件夹utils，创建filter.js文件 import Vue from 'vue' Vue.filter("publishdate",function publishdate(value){ let json_date = new Date(value).toJSON(); let s = new Date(new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g
methods vue过滤器 和_在Vue.js methods中调用filters里的过滤器实例
weixin_26717681的博客
12-30 270
在Vue.js methods中调用filters里的过滤器实例发布于 2020-7-2|复制链接分享一篇关于在Vue methods中调用filters里的过滤器实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小妖过来看看吧需求：vue中，除了在模板中使用过滤器，有时候，methods中也需要使用filters中的过滤器，网友hongz1125提出的解决办法：```javascriptth...
methods vue 使用过滤器_在Vue methods中调用filters里的过滤器实例
weixin_31763817的博客
02-01 720
需求：vue中，除了在模板中使用过滤器，有时候，methods中也需要使用filters中的过滤器，网友hongz1125提出的解决办法：this.$options.filters[filter](...args) //这种方法很简单,也很实用下面是我的方法，有点复杂。建议使用上面网友说的方法。filters: {formatScore(score) {if (score < 20) {s...
methods vue 使用过滤器_vue 内置过滤器的使用总结(附加自定义过滤器)
weixin_39608748的博客
02-01 179
前言vue中过滤器filters的作用是什么？过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结果的简单函数。Vue有很多很便利的过滤器，可以参考官方文档。能够帮我们处理快速一些数据的格式----format数据格式化处理。语法也很简单{{ message | Filter }}message: 要格式化的数据Filter: 对数据格式化的方法链式过滤VueJs允许你链式调用过滤器，...
vue 方法中调用过滤器_VUE中常用的十大过滤器
weixin_35765226的博客
01-30 1259
在vue的学习过程中，我发现过滤器是一个很好用的工具，过滤器(Filters)来渲染数据是一种很有趣的方式。过滤器不能替代Vue中的methods、computed或者watch，不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。在很多不同的情况下，过滤器都是有用的，比如尽可能保持API响应的干净，并在前端处理数据的格式。在你希望避免重复和连接的情况下，它们也可以有效地封装成可重用代...
vue中使用全局过滤器（实战有用）
小剑儿的博客
08-15 1077
1，src下建立filter文件夹，index.js代码如下 exports.orderType = (val) => { let typeName = ''; switch (val) { case 0: { typeName = '取消'; break; } case 1: { typeName = '正常'; break; } ca...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值