在vue中使用公共过滤器filter的方法

平时我们在vue中使用过滤器时，在模板中定义的过滤器不能在其他模板中使用，所以要在每个模板中定义自己的filter，这样就会出现很多重复的代码，那有没有办法定义一个公用的filter，减少代码的重复呢？

下面就给大家展示下使用最多且有效的方法吧!

•首先在公用js中定义一个通用的filter.js，如下图所示，记得一定要把代码整个export出来

const vFilter={
 numFilter:function (value) {
   // 截取当前数据到小数点后两位
   let realVal = Number(value).toFixed(2)
   return realVal
  }
 }
export default vFilter

•然后在main.js中引入

import vueFilter from './js/filter'
for (let key in vueFilter){
 Vue.filter(key,vueFilter[key])
}

•这样我们就可以在模板中尽情使用啦，比如说

<p class="goods-info-p ">￥{{goodsItem.goodsPrice|numFilter}}</p>

总结

以上所述是小编给大家介绍的在vue中使用公共过滤器filter的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 如何换个角度使用VUE过滤器详解

    如何换个角度使用VUE过滤器详解

    前言 过滤器在Vue中的主要用于文本格式化,如小写转大小,日期格式化等操作.官方对这个功能介绍也很简单,不过确实很简单,就一个函数而已.但最近在做两款APP时,遇到一些特殊的需求.然后就对vue中的filter一些用法结合源码好好的梳理了下.下边我们以一个日期格式化展开讨论. 1. 定义一个日期格式化函数 都9012了,我们就采用 ES Module的写法,在vue初始化的项目src的文件中新建一个filters文件夹,并在其中添加DateFmt.js文件,代码如下 export functio

  • vue 内置过滤器的使用总结(附加自定义过滤器)

    前言 vue中过滤器filters的作用是什么? 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档. 能够帮我们处理快速一些数据的格式----format数据格式化处理. 语法也很简单 {{ message | Filter }} message: 要格式化的数据 Filter: 对数据格式化的方法 链式过滤 VueJs允许你链式调用过滤器,简单的来说,就是一个过滤器的输出成为下一个过滤器的输入,然后再次过滤.接下来,我们

  • Vue.js -- 过滤器使用总结

    过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,过滤器通常会使用管道标志 " | ", 比如: {{ msg | capitalize }} // 'abc' => 'ABC' uppercase过滤器 : 将输入的字符串转换成大写字母的过滤器. VueJs允许你链式调用过滤器,简单的来说,就是一个过滤器的输出成为下一个过滤器的输入,然后再次过滤.接下来,我们可以想象一个比较简单的例子,使用了Vue的 filterBy +

  • vue自定义过滤器创建和使用方法详解

    本文实例为大家分享了vue自定义过滤器创建和使用方法,供大家参考,具体内容如下 过滤器:生活中有很多例子,净水器 空气净化器 . 过滤器的作用:实现数据的筛选.过滤.格式化. vue1.*版本是有内置的过滤器,但是在vue2.*所有的版本都已经没有自带的过滤器了. 1.过滤器创建 过滤器的本质 是一个有参数 有返回值的方法 new Vue({ filters:{ myCurrency:function(myInput){ return 处理后的数据 } } }) 2.过滤器使用 语法: <any

  • vue.js中过滤器的使用教程

    vue.js中过滤器的使用教程

    前言 大家再使用vue做项目时,查询功能当然必不可少,这就得使用vue强大的filter啦.其实vue内置的两个属性filterBy和orderBy已经能满足部分需求了,但是她更大的的魅力在于自定义filter(之后的文章中会分享),正好我最近做的项目中用到了这个.先给大家看下需求吧.如下图,这是一个通讯录页面,当我们在搜索栏中输入关键字时需要展示相应的员工,同时还得去掉A.B这样的字母索引,并且输入的关键字可以是中文也可以是拼音.     该页面引入搜索栏组件search-bar以及联系人组件

  • Vue过滤器的用法和自定义过滤器使用

    1.过滤器的用法,用  '|' 分割表达式和过滤器. 例如:{{ msg |  filter}}     {{msg | filter(a)}}  a就标识filter的一个参数. 用两个过滤器:{{msg | myfilter | myfilternumber }} 2.自定义的过滤器 过滤器的结构为:Vue.filter("id",function(value,a){}); value是过滤器的一个参数,也是默认的原始值.a是自定义的一个参数. 自定义过滤器的例子: <!DO

  • 详解VUE2.X过滤器的使用方法

    详解VUE2.X过滤器的使用方法

    VUE2.X过滤器的使用方法有几种,今天讲一种,以cnode社区API为示例,转换tab类型为中文汉字. 首先我们在assets文件夹中新建个js的文件夹,并新建common.js,然后将过滤器写在这个文件中.当然你也可以写在单个组件中,这个等下后面说. /** * 将tab类型转换成汉字 * @param {String} tab 待转换前的tab值 * @return {String} 转换后的tab中文 */ export function change (tab) { switch (t

  • Vue2.0系列之过滤器的使用

    Vue2.0系列之过滤器的使用

    vue2.0已经废弃了过滤器,需要自定义过滤器,用于一些常见的文本格式化. 感觉超级好用!! 过滤器可以用在两个地方:双花括号插值 和 v-bind表达式. 过滤器应该被添加在JavaScript表达式的尾部,由管道符指示. 一.注册全局过滤器 注意事项: 1.全局方法Vue.filter()注册一个自定义过滤器,必须放在vue实例化前面 2.过滤器函数始终以表达式的值作为第一个参数,带引号的参数视为字符串,而不带引号的参数按表达式计算 3.可以设置两个过滤器参数,前提这两个过滤器处理的不冲突

  • vue2 v-model/v-text 中使用过滤器的方法示例

    Vue.js 允许自定义过滤器,一般可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由"管道"符号指示: <!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 v-bind 中 --> <div v-bind:id="rawId | formatId"></div> 可以在一

  • Vue filters过滤器的使用方法

    本文实例为大家分享了Vue filters过滤器使用,供大家参考,具体内容如下 实例 先来看看一段代码理解下 html <div id="app"> {{message | filters2| filters3(true,priceCount)}} </div> js var app = new Vue({ el: "#app", data: { message: 199, priceCount:.8 }, filters:{ filters

随机推荐