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 定义新对象方法
Feb 20 Javascript
js页面跳转的常用方法整理
Oct 18 Javascript
7个让JavaScript变得更好的注意事项
Jan 28 Javascript
如何提高Dom访问速度
Jan 05 Javascript
微信小程序 下拉菜单简单实例
Apr 13 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
详解vue 命名视图
Aug 14 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 mail()函数使用及配置方法
2014/01/14 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
php 基础函数
2017/02/10 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
学习JavaScript的最佳方法分享
2011/10/21 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
2019/08/28 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
Python写的服务监控程序实例
2015/01/31 Python
python 日志增量抓取实现方法
2018/04/28 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
logging level级别介绍
2020/02/21 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
怎样自定义一个异常类
2016/09/27 面试题
大学生优秀团员事迹材料
2014/01/30 职场文书
计划生育诚信协议书
2014/11/02 职场文书
2014年纪检工作总结
2014/11/12 职场文书
利用 JavaScript 构建命令行应用
2021/11/17 Javascript