vue过滤器调用外部的方法（全局过滤器）

最新推荐文章于 2023-01-05 15:20:06 发布
最新推荐文章于 2023-01-05 15:20:06 发布
阅读量746 收藏
点赞数 1
分类专栏： vue js 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45030898/article/details/123264304
版权
js 同时被 2 个专栏收录
74 篇文章 0 订阅
订阅专栏
vue
58 篇文章 0 订阅
订阅专栏

vue过滤器调用外部的方法

1.问题

做项目的时候，很多表格都会用到备注之类的内容，太长了不想换行只能显示部分，所以肯定是要用filter过滤器。因为很多页面都要用到，所以单独抽离为过滤器。

2.解决

首先，自己在一个js文件下写上过滤器方法
在这里插入图片描述

然后在main.js中挂载
在这里插入图片描述
最后在自己的项目要用的地方引用
在这里插入图片描述
最后才发现是全局filter的使用，平时用的少。记录下

ฅQSω[*邱╭
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 方法中调用过滤器_VUE中常用的十大过滤器
weixin_35765226的博客
01-30 1257
在vue的学习过程中，我发现过滤器是一个很好用的工具，过滤器(Filters)来渲染数据是一种很有趣的方式。过滤器不能替代Vue中的methods、computed或者watch，不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。在很多不同的情况下，过滤器都是有用的，比如尽可能保持API响应的干净，并在前端处理数据的格式。在你希望避免重复和连接的情况下，它们也可以有效地封装成可重用代...
用vue构建项目笔记7(在vue中引用公共过滤器filter)
风云的博客
08-24 7517
如何在vue-cli中引入公用filter过滤器
vue定义公共的filter方法，并使用this.$options.filters.方法名称 访问方法。
毅香雪海的博客
03-07 3119
vue中filters中方法调用
初叙
01-04 312
vue中filters中方法调用
全局过滤器filter
weixin_44680639的博客
02-10 249
①传递一个参数 <h1>{{time | dateFormat}}</h1> data: { time: new Date } Vue.filter('dateFormat', (dateData) => { // 默认有一个形参就是要过滤的数据 return dateData.getFullYear() + '-' + (dateData.getMonth()+1) +'-' + dateData.getDate() }) ②传递两个参数 &
vue货币过滤器的实现方法
08-30
在Vue.js中，过滤器是用于格式化或转换视图中的数据的一种机制。在这个场景中，我们关注的是“vue货币过滤器”的实现，这通常涉及到将数字格式化为货币样式，例如添加货币符号、保留小数位等。下面将详细讨论如何在...
Vue的全局过滤器和私有过滤器
01-08
一、全局过滤器 全局过滤器调用时的基本格式： 通过管道符[|]来进行过滤 例如{{name | nameOpe}} 定义过滤器的语法：Vue.filter(过滤器名称,处理函数) 处理函数的第一个参数已被固定了 是data 即管道符前面传递的...
vue 过滤器filter实例详解
10-18
2. **全局定义**：通过 `Vue.filter()` 方法注册全局过滤器，可以被应用在任何 Vue 实例中： ```javascript Vue.filter('capitalize', function (value) { if (!value) return '' value = value.toString() ...
Vue的全局过滤器和私有过滤器的实现
11-20
一、全局过滤器 全局过滤器调用时的基本格式： 通过管道符[|]来进行过滤 例如{{name | nameOpe}} 定义过滤器的语法：Vue.filter("过滤器名称",处理函数) 处理函数的第一个参数已被固定了 是data 即管道符前面传递的...
详解VUE2.X过滤器的使用方法
08-28
在 `main.js` 文件或任何其他全局初始化的地方，我们可以使用 `Vue.filter` 方法来定义全局过滤器。例如，在上面的例子中，我们创建了一个名为 `change` 的过滤器，用于将英文的 tab 类型转换为中文： ```...
Vue 注册全局Filter
编程邦
05-22 4050
最新版的Vue2.0，取消了所有Filter，只能自己动手来写Filter,下面介绍下怎样注册全局Filter.1. 创建filter.js，这里是一个格式化时间的Filter。export const normalTime=(time)=&gt;{ if(time){ var odate = new Date(); odate.setTime(time); var ...
全局过滤器与私有过滤器
weixin_50913773的博客
02-27 437
过滤器Filters是vue为开发者提供的功能，常用于文本的格式化，过滤器可以用在两个方面：插值表达式和v-bind属性绑定。 过滤器应该被添加在javascript表达式的尾部，由管道符进行调用， 注意： 在双花括号通过管道符调用capitalize过滤器，对message的值进行格式化 <p>{{message | capitalize}}</P> 在v-bind中通过管道符调用formatId过滤器，对rawid的只进行格式化 <div v-bind:id="rawi
vue入门学习之过滤器的使用
喜羊羊love红太狼
10-14 651
vue入门 ，过滤器的使用
vue2.0过滤器使用
黄孝果的博客
04-12 3071
组件内过滤器 &lt;template&gt; &lt;div class="hello"&gt; 我是尾部 &lt;input type="text" v-model="text"&gt; &lt;br/&gt; 显示：{{text|myFilter}} &lt;/div&gt; &lt
Vue 过滤器filter调用data、methods中的东西报错
这就是快乐嘛
04-16 1835
今天学习了filter，我将过滤的过滤方法放到methods中发现怎么调用都说没有这个function 然后我把log了一下这个this 发现这个this指向的竟然是window 于是网上找到了如下的解决方法： 定义一个全局变量: let that; 在beforeCreate生命周期将this赋值给that，通过that获得 var vm = new Vue({ el: '#app',...
vue全局挂载过滤器的实现
m0_46149187的博客
12-27 525
哈喽 大家好 ！！！ 今天呢 我们呢来写一个 封装全局过滤器 首先呢 先建一个filters过滤器 在里面写一个我们要封装的方法 这是呢 我建的一个filters 在里面写了一个简单的年龄判断 如果传进来的参数是21的话 那么就是青少年 当然咱这里数据写的不严谨 如果小于21呢就是少年 然后我们直接把这个文件抛出 在man的js中给引入 这样呢 我们就可以随时的调用这个过滤器了 如下图 ！！！ 我们在引入filters后 下面通过 es6中的 keys 去循环遍历了 目的是 去为了上vue.filter去
Vue2使用全局函数或变量的两种常用方式
Mr Dear的博客
01-05 1546
Vue2使用全局函数或变量的两种常用方式
vue过滤器的使用
guoyp2126的博客
08-17 235
前言 Vue允许用户自定义过滤器，对于一些常见的文本格式化、剔除错误的格式或字符、文本中增加一些公用的报文头或报文尾内容，需要使用到过滤器。如：对输入的文本进行检查，将所有的字符转换为大写；或者对金额类的属性前增加“￥”符号等。 局部过滤器 在某个组件内部定义的过滤器称为局部过滤器。在vue2.X及以上版本中定义相应的filter，filter的地位同Data、mothod、computed平行，Filter的定义格式为 filters: { //fiters标签，与data、mothod平
vue如何调用自定义的全局过滤器
最新发布
05-30
要调用自定义的全局过滤...如果您需要使用全局过滤器，可以在过滤器名称前加上`$`前缀来调用全局过滤器，例如： ``` <div>{{ message | $myFilter }} ``` 在上面的示例中，`$myFilter`表示调用全局过滤器`myFilter`。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值