vue 将多个过滤器封装到一个文件中的代码详解


Posted in Javascript onSeptember 05, 2020

在这里只简单探讨关于如何将vue过滤器封装到一个文件当中,当然可以封装多个不同类型的过滤器,然后可以在需要使用过滤器的文件当中进行复用,非常的方便。
1.
首先是文件结构,首先涉及到 filters.vue (引用过滤器的文件)

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 将多个过滤器封装到一个文件中的代码详解

文件代码:

//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文件当中引入全局过滤器:

vue 将多个过滤器封装到一个文件中的代码详解

文件代码:

//全局过滤器
import * as filters from './filters/index'
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

2.

最后附上文件结构图:

vue 将多个过滤器封装到一个文件中的代码详解

总结

到此这篇关于vue 将多个过滤器封装到一个文件中的文章就介绍到这了,更多相关vue过滤器封装文件中内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
学习JavaScript的最佳方法分享
Oct 21 Javascript
判断某个字符在一个字符串中是否存在的js代码
Feb 28 Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
vue router-link传参以及参数的使用实例
Nov 10 Javascript
简述JS控制台的使用
Jul 15 Javascript
VUE-cli3使用 svg-sprite-loader
Oct 20 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 Javascript
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
js实现可爱的气泡特效
Sep 05 #Javascript
js实现点击按钮随机生成背景颜色
Sep 05 #Javascript
javascript实现一款好看的秒表计时器
Sep 05 #Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 #Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 #Javascript
Vue中component标签解决项目组件化操作
Sep 04 #Javascript
JS数组转字符串实现方法解析
Sep 04 #Javascript
You might like
js调用flash的效果代码
2008/04/26 Javascript
javascript来定义类的规范小结
2010/11/19 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
js/html光标定位的实现代码
2013/09/23 Javascript
原生javascript实现的分页插件pagenav
2014/08/28 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
Python脚本暴力破解栅栏密码
2015/10/19 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
解决matplotlib库show()方法不显示图片的问题
2018/05/24 Python
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
python和php哪个容易学
2020/06/19 Python
详解Python中的路径问题
2020/09/02 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
cf收人广告词
2014/03/14 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers
Python基础之Socket通信原理
2021/04/22 Python