【Vue】Vue的过滤器(filter)
文章目录
- filter概述
- 全局过滤器
- 局部过滤器
filter概述
过滤器的兼容性：
过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能。
在企业级项目开发中：
- 如果使用的是 2.x 版本的 vue，则依然可以使用过滤器相关的功能
- 如果项目已经升级到了 3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能
过滤器主要用于文本的格式化，或者数组数据的过滤与排序等。
使用时通过管道符（ | ）添加到表达式的尾部 使用。
注册过滤器：
- 全局注册：
Vue.filter(name,callback) - 局部注册：
new Vue({filters:{}})
使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
全局过滤器
使用 Vue.filter()方法来注册。
-
该方法接收两个参数，第一个参数是过滤器 的 ID（即名字）
-
第二个参数是一个函数对象，过滤器要实现的功能在这个函数中定义。
通过过滤器实现转大写：
<div id="root"><input type="text" v-model="message">{{ message | capitalize }}
div><script>Vue.filter('capitalize',function(value) {if(!value) return '';value = value.toString();return value.toUpperCase();})new Vue({el: '#root',data: {message: 'java'}})
script>
局部过滤器
在 Vue 实例的选项对象中使用 filters 选项来注册
<div id="root"><input type="text" v-model="message">{{ message | capitalize }}
div><script>new Vue({el: '#root',data: {message: 'java'},filters: {capitalize: function(value) {if(!value) return '';value = value.toString();return value.toUpperCase();}}})
script>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！