vue 过滤器filter实例详解
vue的过滤器一般在JavaScript表达式的尾部,由“|”符号指示:
过滤器可以让我们的代码更加优美,一般可以用在时间格式化,首字母大写等等。
例如:{{date|dateFormat}}这是过滤器的写法;{{dateFormat(date)}}这是函数调用的写法
可以看出过滤器的写法更加语义化,让人一眼可以看出它的含义。
{{message|capitalize}}
//在这个例子中,filterA被定义为接收单个参数的过滤器函数,表达式message的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数filterB,将filterA的结果传递到filterB中
{{message|capitalize('string',obj)}}
//这里的参数将在过滤器函数内以第二个参数开始算起第一个参数为要过滤的值message,即'string'为第二个参数,obj为第三个参数。
过滤器方法在接收到参数后,你可以在方法内进行一系列的处理,最终return出处理结果即可。
1、过滤器可以是组件内的
filters:{ capitalize:function(value){ if(!value)return'' value=value.toString() returnvalue.charAt(0).toUpperCase()+value.slice(1) } }
2、过滤器也可以是挂载在全局Vue里
Vue.filter('capitalize',function(value){ if(!value)return'' value=value.toString() returnvalue.charAt(0).toUpperCase()+value.slice(1) })
总结
以上所述是小编给大家介绍的vue过滤器filter实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。