Vue中,过滤器的使用方法!
发布时间:2020-12-14 05:06:39 所属栏目:大数据 来源:网络整理
导读:? ? ? ? Vue.js允许自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部,由“管道”符号指示;(借官方的来介绍下,接下来直奔主题) ? 1、定义全局过滤器!任何
? ? ? ? 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是局部过滤器,只能在组件内使用;和全局过滤器一样可以传参,使用同时多个过滤器; ? ? ?如果大家喜欢的话,欢迎关注“前端伪大叔”我将为您不间断的分享前端学习知识! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |