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中的排序算法代码
Feb 22 Javascript
jquery在IE、FF浏览器的差别详细探讨
Apr 28 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 Javascript
谈谈对offsetleft兼容性的理解
Nov 11 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
Vue精简版风格概述
Jan 30 Javascript
快速解决brew安装特定版本flow的问题
May 17 Javascript
vue动画效果实现方法示例
Mar 18 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之第七天
2006/10/09 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
jquery cookie插件代码类
2009/05/26 Javascript
jquery each()源代码
2011/02/14 Javascript
js创建元素(节点)示例
2014/01/02 Javascript
js登录弹出层特效
2014/03/07 Javascript
Javascript中浮点数相乘的一个解决方法
2014/06/03 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
[39:52]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第一场
2018/04/04 DOTA
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
python re正则表达式模块(Regular Expression)
2014/07/16 Python
Python的Flask框架的简介和安装方法
2015/11/13 Python
python正则实现提取电话功能
2018/02/24 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
Python多进程原理与用法分析
2018/08/21 Python
Django用户认证系统 User对象解析
2019/08/02 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
python 数据类型强制转换的总结
2021/01/25 Python
巴西本土电商平台:Americanas
2020/06/21 全球购物
酒店端午节促销方案
2014/02/18 职场文书
《鱼游到了纸上》教学反思
2014/02/20 职场文书
师德师风演讲稿
2014/05/05 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
物业保洁员管理制度
2015/08/05 职场文书
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android
mysql全面解析json/数组
2022/07/07 MySQL