vue 过滤器filter实例详解
更新时间：2018年03月14日 08:34:25 作者：Mr.苏
VueJs 提供了强大的过滤器API，能够对数据进行各种过滤处理，返回需要的结果。这篇文章主要给大家介绍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实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了vue单页缓存存在的问题及解决方案(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
今天小编就为大家分享一篇Vue filter格式化时间戳时间成标准日期格式的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了如何基于vue2实现简单的答题组件,点击正确的选项,该选项背景变绿色；点击错误的选项,该选项背景变红色,有需要的可以参考下2024-12-12
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
本篇文章主要介绍了vue音乐播放器插件vue-aplayer的配置及其使用实例详解，具有一定的参考价值，有兴趣的可以了解一下2017-07-07
这篇文章主要介绍了Vue.$set 失效的坑 问题发现及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-07-07
本篇文章主要介绍了在基于vue-cli的项目自定义打包环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
本文主要介绍了SpringBoot结合Vue3实现简单的前后端交互,结合实际案例,说明了如何实现前后端数据的交互,具有一定的 参考价值,感兴趣的可以了解一下2023-08-08
Element Plus 是一个基于 Vue 3 的现代前端UI框架,它旨在提升开发体验,并为开发者提供高效、优雅的组件,在本文中将详细介绍如何在 Vue 3 项目中安装 Element Plus,感兴趣的朋友一起看看吧2024-07-07
这篇文章主要介绍了Vue SSR 即时编译技术的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要给大家介绍了关于axios如何全局注册的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用axios具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-01-01
最新评论