vue自定义filters过滤器


Posted in Javascript onApril 26, 2018

官方给出

Vue.filters(id , [definition])
//id {string}
//definition {function}

详情查看

在项目中我们如果有多个filters,那么我怎么一次注册,全局可用,我们在项目里新建一个filters文件夹,如下,index.js是出口文件,readMore是一个对字符串做处理的过滤器

vue自定义filters过滤器

文件目录

下面贴上代码:

//index.js
// 引入所有的过滤函数
import readMore from './readMore';
// 导出在一个对象上
export default {
  readMore
};
//readMore.js
//查看更多文字显示'...'
let readMore = (text,length,suffix) => {
 if(text) {
  if(text.length <= length) return text;
  return text.substring(0,length) + suffix;
 }
 return text;
 };
export default readMore;

然后在main.js里面做如下处理:

vue自定义filters过滤器

main.js做全局注册

//全局注册自定义的过滤器
import filters from './filters';
for(let key in filters){
 Vue.filter(key, (val,value1,value2) => {
 return filters[key](val,value1,value2);
 });
}

就可以在全局使用了

//在test.vue里面使用
  <p html="readMore('文字文字' ,60,`...<font style='color:rgba(25,123,207,1);'>全文</font>`)"></p>
<span>#<span class="add">{{'文字文字' | readMore(15,'...')}}</span>#</span>

总结

以上所述是小编给大家介绍的vue自定义filters过滤器,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery animate 动画效果使用说明
Nov 04 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
Mar 10 Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
vue中锚点的三种方法
Jul 06 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
判断js数据类型的函数实例详解
May 23 Javascript
详细谈谈JavaScript中循环之间的差异
Aug 23 Javascript
JavaScript实现微信红包算法及问题解决方法
Apr 26 #Javascript
react 创建单例组件的方法
Apr 26 #Javascript
node打造微信个人号机器人的方法示例
Apr 26 #Javascript
Vue 使用中的小技巧
Apr 26 #Javascript
基于Vue实现拖拽功能
Jul 29 #Javascript
vuex操作state对象的实例代码
Apr 25 #Javascript
微信小程序商品详情页的底部弹出框效果
Nov 16 #Javascript
You might like
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
2015/03/11 Javascript
JavaScript操作cookie类实例
2015/03/31 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
Vue slot用法(小结)
2018/10/22 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
python监控文件或目录变化
2016/06/07 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
Python3 修改默认环境的方法
2019/02/16 Python
Django静态文件加载失败解决方案
2020/08/26 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
企划主管岗位职责
2013/12/12 职场文书
同学聚会老师邀请函
2014/01/28 职场文书
个人银行贷款担保书
2014/04/01 职场文书
大学优秀班集体申报材料
2014/05/23 职场文书
医学生求职自荐书
2014/06/12 职场文书
高中生自我评价范文2015
2015/03/03 职场文书
应届生求职自荐信范文
2015/03/04 职场文书
法院答辩状格式
2015/05/22 职场文书
国博复兴之路观后感
2015/06/02 职场文书
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书
2016年少先队活动总结
2016/04/06 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang
nginx搭建NFS网络文件系统
2022/04/14 Servers