vue 过滤器filter实例详解

前端之家收集整理的这篇文章主要介绍了vue 过滤器filter实例详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

vue的过滤器一般在JavaScript 表达式的尾部,由“|”符号指示:

过滤器可以让我们的代码更加优美,一般可以用在时间格式化,首字母大写等等。

例如:{{ date | dateFormat }}这是过滤器的写法;{{ dateFormat(date) }}这是函数调用的写法

可以看出过滤器的写法更加语义化,让人一眼可以看出它的含义。

{{ message | capitalize }}
{{ message | filterA | filterB }}

// 在这个例子中,filterA 被定义为接收单个参数的过滤器函数,表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB,将 filterA 的结果传递到 filterB 中

{{ message | capitalize('string',obj) }}

// 这里的参数将在过滤器函数内以第二个参数开始算起第一个参数为要过滤的值message,即'string'为第二个参数,obj为第三个参数。

过滤器方法在接收到参数后,你可以在方法内进行一系列的处理,最终return出处理结果即可。

1、过滤器可以是组件内的

2、过滤器也可以是挂载在全局Vue里

总结

以上所述是小编给大家介绍的vue 过滤器filter实例详解。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Vue相关文章