标签：前端学习 允许 bin 全局 组件 技术 das 过滤器 uppercase
Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示；（借官方的来介绍下，接下来直奔主题）
1、定义全局过滤器！任何组件都能用。
main.js中定义全局过滤器
// 定义长度为10的过滤器 Vue.filter(‘length10‘,(e) =>{ return e.slice(0,10) + ‘...‘ }) // 定义转大小写的过滤器 Vue.filter(‘toUpperCase‘,(e)=>{ return e.toUpperCase() })
app.vue使用
// template <div>{{str}}</div> <div>{{str | length10}}</div> <div>{{str1 | length10 | toUpperCase}}</div> // script data(){ return { str:‘公众号“前端伪大叔”，欢迎大家前来关注！‘, str1:‘qianduanweidashu‘ } }
总结：过滤器使用方法是‘|’直接使用，可以使用多个过滤器
2、过滤器传参，了解一下 /笑哭
main.js
Vue.filter(‘Biography‘,(e,str1) =>{ return e.slice(0,str1) + ‘...‘ }
App.vue
// template <div>{{str | Biography(9)}}</div> // script data(){ return { str:‘公众号“前端伪大叔”，欢迎大家前来关注！‘, } }
3、组件内过滤器
组件内过滤器，需要定义在filtets这个对象中，对象中定义的都是方法；
// template <div>{{str | length(9) }}</div> <div>{{str1 | length(9) | toUpperCase}}</div> // script data() { return { str: "公众号“前端伪大叔”，欢迎大家前来关注！", str1:‘qianduanweidashu‘ }; }, // 这里filters是这个对象 filters: { // 自行输入长度 length(e, num) { return e.slice(0, num) + "..."; }, // 转为大写 toUpperCase(e) { return e.toUpperCase(); } }
总结：filters是局部过滤器，只能在组件内使用；和全局过滤器一样可以传参，使用同时多个过滤器；
如果大家喜欢的话，欢迎关注“前端伪大叔”我将为您不间断的分享前端学习知识！
标签：前端学习 允许 bin 全局 组件 技术 das 过滤器 uppercase
原文地址：https://www.cnblogs.com/webfy/p/11564467.html
