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 Ajax异步处理Json数据.
Sep 09 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
解析javascript瀑布流原理实现图片滚动加载
Mar 10 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
JS实现的数组去除重复数据算法小结
Nov 17 Javascript
Vue仿今日头条实例详解
Feb 06 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生成月历代码
2007/06/14 PHP
php错误级别的设置方法
2013/06/17 PHP
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
php图片上传类 附调用方法
2016/05/15 PHP
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
玩转方法:call和apply
2014/05/08 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
JS实现全屏的四种写法
2016/12/30 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
2017/05/17 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
Python解惑之整数比较详解
2017/04/24 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
人生苦短我用python python如何快速入门?
2018/03/12 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
详解python和matlab的优势与区别
2019/06/28 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
美国领先的奢侈美容零售商:Bluemercury
2017/07/26 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
初一学生评语大全
2014/04/24 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
四风查摆剖析材料
2014/10/10 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
导游词之崇武古城
2019/10/07 职场文书
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技