提示:vue过滤器在vue3中已经被弃用
1.过滤器 filter 分为全局过滤器和局部(私有)过滤器
局部过滤器的权重高于全局过滤器
eg:先看例子
<div id="app">
<p> message的值为{{ message | capi }}</p>
</div>
<script src="../lib/vue/vue.js"></script>
<script>
// vue2全局过滤器(必须写在Vue实列的上面)
Vue.filter('capi', function(val) {
const first = val.charAt(0).toUpperCase();
const other = val.slice(1);
return first + other + ' 调用了全局过滤器';
})
const vm = new Vue({
el: '#app',
data: {
message: 'hello vue.js!'
},
// vue2局部过滤器
filters: {
capi(val) {
const first = val.charAt(0).toUpperCase();
const other = val.slice(1);
return first + other + ' 调用了局部过滤器';
}
}
})
</script>
代码如上,效果如下:
2.全局过滤器的定义方法
使用Vue.filter方法
Vue.filter('过滤器名', function(形参){
操作
返回所过滤的值
})
3.局部过滤器定义,直接在Vue实例中定义filters对象
注意局部过滤器filters是复数带s,而全局过滤器没有s就是filter,因为全局过滤器可被多个Vue实例共享使用
4.过滤器的使用范围:
{{ }} 插值表达式中或者 v-bind 表达式
5.用法规范
{{ 要被处理的文本 | 过滤器名 }}
注意 :
01.“|” 小竖线叫做管道符 在它前面的是要被处理的文本参数(作为后面过滤器的实参),在它后面的就是过滤器名。
ps:可串联使用“ | ” 进行多次过滤处理
02.在过滤器函数中一定要有 return 值