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 相关文章推荐
学习YUI.Ext 第三天
Mar 10 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
div模拟选择框示例代码
Nov 03 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
jquery常用特效方法使用示例
Apr 25 Javascript
javascript实现复选框超过限制即弹出警告框的方法
Feb 25 Javascript
js实现时间轴自动排列效果
Mar 09 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 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/03/17 PHP
巧用php中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
php数组的概述及分类与声明代码演示
2013/02/26 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
PHP小技巧之函数重载
2014/06/02 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
繁简字转换功能
2006/07/19 Javascript
JavaScript 调试器简介
2009/02/21 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
JS实现新建文件夹功能
2017/06/17 Javascript
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
Python3.x和Python2.x的区别介绍
2013/02/12 Python
python插入数据到列表的方法
2015/04/30 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
TensorFlow损失函数专题详解
2018/04/26 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
深入浅析css3 border-image边框图像详解
2015/11/24 HTML / CSS
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
有模特经验的简历自我评价
2013/09/19 职场文书
会计电算化专业毕业生自荐信
2013/12/20 职场文书
建筑工程毕业生自我鉴定
2014/01/14 职场文书
学生手册评语
2014/05/05 职场文书
保险公司演讲稿
2014/09/02 职场文书
司机岗位职责
2015/02/04 职场文书
自信主题班会
2015/08/14 职场文书