这次给大家带来vue自定义filters过滤器步骤详解，vue自定义filters过滤器的注意事项有哪些，下面就是实战案例，一起来看一下。
官方给出
Vue.filters(id , [definition])//id {string}//definition {function}
登录后复制
详情查看
在项目中我们如果有多个filters，那么我怎么一次注册，全局可用，我们在项目里新建一个filters文件夹，如下，index.js是出口文件，readMore是一个对字符串做处理的过滤器
文件目录
下面贴上代码：
//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里面做如下处理：
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,`...全文`)">#{{'文字文字' | readMore(15,'...')}}#
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
处理Vue项目编译后部署在非网站根目录方法详解
使用VuePress搭建个人博客步骤详解（附代码）
以上就是vue自定义filters过滤器步骤详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2761492.html
