vue.js入门（四）——自定义过滤器

前言

虽然VueJs给我们提供了很多强有力的过滤器，但有时候还是不够。但是Vue给我们提供了一个干净简洁的方式来定义我们自己的过滤器，使用管道|来完成过滤，小编本篇使用过滤器简单实现字符串反转！即下面这种效果：

内容

自定义过滤器函数格式：

Vue.filter() Constructor Parameters:

1.filterId: 过滤器ID，用来做为你的过滤器的唯一标识；

2.filter function: 过滤器函数，用一个function来接收一个参数，之后再将接收到的参数格式化为想要的数据结果。

全局过滤器

Vue.filter('myFilter',function(value){
return  value.split('').reverse().join('');
})

但是全局过滤器的范围大，权限小；对于组件内已经声明的同名的过滤器，不适用全局过滤器，使用组件内的过滤器。

局部过滤器

1.script定义过滤器：

<script>
export default {
data(){
return {
text:''
}
},
filters:{
myFilter:function(value){
//转化数组，翻转数组，转换成字符串。
return  value.split('').reverse().join('');
}
}
}
</script>

2.模板中使用：

<template>
<div id="app">
<input type="text" name="" v-model="text">
显示：{{text|myFilter}}
</div>
</template>

总结

总之使用非常方便，只需要自己定义一下形式，然后用|直接使用即可。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符|指示。