vue 过滤器filter实例分析

这篇文章主要为大家详细介绍了vue 过滤器filter实例分析，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

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

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

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

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

代码如下：

<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
<!-- 也可以串联多个过滤器 -->
{{ message | filterA | filterB }}

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

代码如下：

<!-- 过滤器接收参数 -->
{{ message | capitalize('string', obj) }}

 

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

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

 

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

 

代码如下：

filters: {
 capitalize: function (value) {
 if (!value) return ''
 value = value.toString()
 return value.charAt(0).toUpperCase() + value.slice(1)
 }
}

 

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

 

代码如下：

Vue.filter('capitalize', function (value) {
 if (!value) return ''
 value = value.toString()
 return value.charAt(0).toUpperCase() + value.slice(1)
})

 

总结

 

以上所述是小编给大家介绍的vue 过滤器filter实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对四海网网站的支持！

本文来自：http://www.q1010.com/184/5128-0.html

注：关于vue 过滤器filter实例分析的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js