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 相关文章推荐
客户端静态页面玩分页
Jun 26 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
Js判断CSS文件加载完毕的具体实现
Jan 17 Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 Javascript
node.js中的fs.symlink方法使用说明
Dec 15 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
Jul 06 Javascript
基于js 本地存储(详解)
Aug 16 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
May 26 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
Nov 20 Javascript
js实现蒙版效果
Jan 11 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
URL Rewrite的设置方法
2007/01/02 PHP
PHP和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
PHP7新特性
2021/03/09 PHP
jQuery 改变CSS样式基础代码
2010/02/11 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
2019/08/03 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
JavaScript快速调试的两个技巧
2020/11/04 Javascript
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
Django跨域请求CSRF的方法示例
2018/11/11 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
微笑服务标语
2014/06/24 职场文书
土建专业毕业生自荐书
2014/07/04 职场文书
审计班子对照检查材料
2014/08/27 职场文书
场地使用证明模板
2014/10/25 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
创业计划书之水果店
2019/07/18 职场文书