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 Dialog 弹出层对话框插件
Aug 09 Javascript
取得窗口大小 兼容所有浏览器的js代码
Aug 09 Javascript
JavaScript中创建字典对象(dictionary)实例
Mar 31 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
基于node实现websocket协议
Apr 25 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 Javascript
Vue拖拽组件开发实例详解
May 11 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
原生js实现碰撞检测
Mar 12 Javascript
原生js+canvas实现下雪效果
Aug 02 Javascript
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
JS函数式编程实现XDM一
Jun 16 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中数据的批量导入(csv文件)
2006/10/09 PHP
PHP session会话的安全性分析
2011/09/08 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
vue2.0 路由不显示router-view的解决方法
2018/03/06 Javascript
vue实现在表格里,取每行的id的方法
2018/03/09 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
如何实现iframe父子传参通信
2020/02/05 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
2020/11/04 Javascript
python冒泡排序算法的实现代码
2013/11/21 Python
Python Flask前后端Ajax交互的方法示例
2018/07/31 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
Django更新models数据库结构步骤
2020/04/01 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
Python Django路径配置实现过程解析
2020/11/05 Python
python中实现词云图的示例
2020/12/19 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
二人合伙经营协议书
2014/09/13 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL