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 异步调用框架 (Part 4 - 链式调用)
Aug 04 Javascript
JavaScript判断DOM何时加载完毕的技巧
Nov 11 Javascript
js弹出div并显示遮罩层
Feb 12 Javascript
jQuery构造函数init参数分析续
May 13 Javascript
JavaScript表单焦点自动切换代码
Jul 24 Javascript
禁用backspace网页回退功能的实现代码
Nov 15 Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
小程序实现左滑删除效果
Jul 25 Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
js 将多个对象合并成一个对象 assign方法的实现
Sep 24 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与javascript的两种交互方式
2006/10/09 PHP
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
微信小程序中顶部导航栏的实现代码
2017/03/30 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
vue中的计算属性的使用和vue实例的方法示例
2017/12/04 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中生成器和yield语句的用法详解
2015/04/17 Python
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
Python 实现淘宝秒杀的示例代码
2018/01/02 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
韩国11街:11STREET
2018/03/27 全球购物
销售人员自我评价怎么写
2013/09/19 职场文书
机械个人求职信范文
2014/01/24 职场文书
总经理助理的职责
2014/03/14 职场文书
平面设计专业求职信
2014/08/09 职场文书
老人节标语大全
2014/10/08 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
Redis过期数据是否会被立马删除
2022/07/23 Redis