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 uaMatch源代码
Feb 14 Javascript
extJS中常用的4种Ajax异步提交方式
Mar 07 Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
纯JS实现简单的日历
Jun 26 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
微信小程序slider组件使用详解
Jan 31 Javascript
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
Mar 06 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 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面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
jquery创建div 实现代码
2009/04/27 Javascript
Javascript 日期处理之时区问题
2009/10/08 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
js选项卡的实现方法
2015/02/09 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
js为什么不能正确处理小数运算?
2015/12/29 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
JavaScript实现简单动态进度条效果
2018/04/06 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
typescript编写微信小程序创建项目的方法
2021/01/29 Javascript
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
Python的Tornado框架异步编程入门实例
2015/04/24 Python
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
美国山地自行车、露营、户外装备和服装购物网站:Aventuron
2018/05/05 全球购物
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
餐饮采购员岗位职责
2014/03/15 职场文书
生日礼品店创业计划书范文
2014/03/21 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
小学母亲节活动总结
2015/02/10 职场文书
创业计划书之酒店
2019/08/30 职场文书
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python