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的Validation插件中Remote验证的中文问题
Jul 26 Javascript
javascript 在firebug调试时用console.log的方法
May 10 Javascript
jQuery中end()方法用法实例
Jan 08 Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 Javascript
javascript实现标签切换代码示例
May 22 Javascript
JQuery学习总结【二】
Dec 01 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
微信小程序实现手指触摸画板
Jul 09 Javascript
详解vue-cli3多页应用改造
Jun 04 Javascript
移动端吸顶fixbar的解决方案详解
Jul 17 Javascript
Vue如何实现变量表达式选择器
Feb 18 Vue.js
如何优化vue打包文件过大
Apr 13 Vue.js
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 form 表单传参明细研究
2009/07/17 PHP
php Memcache 中实现消息队列
2009/11/24 PHP
php中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
php使用异或实现的加密解密实例
2013/09/04 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
2013/06/28 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
使用Python求解最大公约数的实现方法
2015/08/20 Python
轻松理解Python 中的 descriptor
2017/09/15 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
pandas.read_csv参数详解(小结)
2019/06/21 Python
Python整数对象实现原理详解
2019/07/01 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
实习单位接收函
2014/01/11 职场文书
考试不及格的检讨书
2014/01/22 职场文书
售后服务承诺书范文
2014/03/26 职场文书
求职信结尾怎么写
2014/05/26 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
人事任命通知
2015/04/20 职场文书
升学宴祝酒词
2015/08/11 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server