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 相关文章推荐
javascript 通用简单的table选项卡实现
May 07 Javascript
Javascript匿名函数的一种应用 代码封装
Jun 27 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
Apr 11 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
优化Node.js Web应用运行速度的10个技巧
Sep 03 Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 Javascript
小程序云开发实战小结
Oct 25 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 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绘图函数实现简单验证码功能的方法
2016/10/18 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
2015/07/18 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
微信小程序 122100版本更新问题解决方案
2016/12/22 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
Bootstrap一款超好用的前端框架
2017/09/25 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
python中时间模块的基本使用教程
2019/05/14 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
pandas 空数据处理方法详解
2019/11/02 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
大学生优秀团员事迹材料
2014/01/30 职场文书
初中班级口号
2014/06/09 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
2015年教师节活动总结
2015/03/20 职场文书
经费申请报告
2015/05/15 职场文书