vue 将多个过滤器封装到一个文件中的代码详解
更新时间：2020年09月05日 10:31:36 作者：胡兴朝
这篇文章主要介绍了vue 将多个过滤器封装到一个文件中实现方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
在这里只简单探讨关于如何将vue过滤器封装到一个文件当中，当然可以封装多个不同类型的过滤器，然后可以在需要使用过滤器的文件当中进行复用，非常的方便。
1.
首先是文件结构，首先涉及到 filters.vue (引用过滤器的文件)
文件代码：
<template>
<div class="chart-container">
<ul>
<li v-for="texts in text" >{{texts | MoneyFormat}}</li>
</ul>
</div>
</template>
<script>
import filter from '../filters/index'
export default {
data() {
return {
text: ['holle','sdfs','fuck']
};
},
};
</script>
然后是用来封装过滤器的文件 filters下的index.js文件：
文件代码：
//vue定义全局过滤器
//第一个过滤器：用来将单词的首字母变成大写
let MoneyFormat = value => {
if (value) {
let str = value.toString();
//获取英文，以空格分组把字符串转为数组，遍历每一项，第一项转为大写字母
let newArr = str.split(" ").map(ele => {
console.log(ele.slice(1))
return ele.charAt(0).toUpperCase() + ele.slice(1)
});
return newArr.join(" ")
}
}
//第二个过滤器：用来将字符串'22'添加到字母后面
let timeFilter = function (value) {
return value + "22"
}
//暴露这两个过滤器
export { MoneyFormat,timeFilter }
最后就是在main.js文件当中引入全局过滤器：
文件代码：
//全局过滤器
import * as filters from './filters/index'
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
2.
最后附上文件结构图：
总结
到此这篇关于vue 将多个过滤器封装到一个文件中的文章就介绍到这了,更多相关vue过滤器封装文件中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue组件和Route的生命周期的相关知识,需要的朋友可以参考下2018-02-02
这篇文章主要介绍了vue实现锚点跳转scrollIntoView()使用案例，文中结合实例代码介绍了vue锚点跳转的三种方式(页内跳转，跨页跳转，函数跳转),需要的朋友可以参考下2023-07-07
这篇文章主要介绍了element-ui 插槽自定义样式居中效果,简单来讲实现思路是通过template标签可理解为一个内嵌组件,宽高重新定义,可在自定义内容外层套一层盒子,让盒子占满所有空间,再使用flex让内部元素居中,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了使用VUE实现一键复制内容功能,功能就是当我们点击复制按钮时，会提示“复制成功”，这样复制的内容就可以在其他地方使用了，感兴趣的朋友可以学习一下2023-04-04
这篇文章主要介绍了Vue Cli中的环境变量和模式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本篇文章主要介绍了weex里Vuex state使用storage持久化详解，非常具有实用价值，需要的朋友可以参考下2017-09-09
这篇文章主要介绍了vue如何自定义事件传参，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
自适应布局是一种根据不同的设备屏幕分辨率进行布局的方式,它为不同的屏幕分辨率定义了不同的布局,下面这篇文章主要给大家介绍了关于vue前端自适应布局实现的相关资料,需要的朋友可以参考下2024-08-08
本文给大家介绍Vue3中使用v-model高级用法参数绑定传值的相关知识,包括单个输入框传值和多个输入框传值,一个组件接受多个v-model值,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧2023-10-10
vue3使用iframe嵌入ureport2设计器,解决预览时NullPointerException异常问题
这篇文章主要介绍了vue3使用iframe嵌入ureport2设计器,解决预览时NullPointerException异常问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论