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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
JavaScript几种形式的树结构菜单
May 10 Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
javaScript中的原型解析【推荐】
May 05 Javascript
AngularJS 应用模块化的使用
Apr 04 Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 Javascript
解决Vue打包上线之后部分CSS不生效的问题
Nov 12 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 Javascript
最新最全的手机号验证正则表达式
Feb 24 Javascript
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
php array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
jQuery 选择同时包含两个class的元素的实现方法
2016/06/01 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
2017/06/12 Javascript
浅谈vue路径优化之resolve
2017/10/13 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
js实现上下左右键盘控制div移动
2020/01/16 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
Python 备份程序代码实现
2017/03/06 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
Python读取VOC中的xml目标框实例
2020/03/10 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
外贸公司实习自我鉴定
2013/09/24 职场文书
幼儿教师自我鉴定
2013/11/02 职场文书
优秀护士先进事迹
2014/05/08 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
Redis分布式锁的7种实现
2022/04/01 Redis
Java 死锁解决方案
2022/05/11 Java/Android
MySQL数据库安装方法与图形化管理工具介绍
2022/05/30 MySQL
输入框跟随文字内容适配宽实现示例
2022/08/14 Javascript