过滤器的主要作用就是对数据进行处理,返回处理过的数据
过滤器分为全局过滤器和局部过滤器
全局过滤器
Vue.filter(),里面有两个参数,参数1是过滤器名,参数2是处理数据的回调函数,注意回调函数里一定要return
这是创建过滤器,使用过滤器一般格式为{{要过滤的数据 | 过滤器的名}}(注释:“|”为管道符号)
我们来看一个例子:
<div id="app">
{{time|xixi}}
<!-- {{要过滤的数据|(管道符号)过滤器的名字}} -->
</div>
<script>
// 过滤器的创建
Vue.filter("xixi",(test)=>{
console.log(test)
return test/2
})
let vm=new Vue({
el:"#app",
data:{
time:'100'
}
})
</script>
结果为50,
我们先创建一条数据time,在创建一个过滤器xixi,使用时直接按照格式{{time|xixi}}就可以获取到这条数据经过过滤器处理只有的数据了。
局部过滤器
局部过滤器的使用和全局过滤一样,都是{{要过滤的数据 | 过滤器的名}},但在创建的时候是做为组件或者实例里的配置项filters:{过滤器名,处理函数}去实现的。
<div id="app">
{{time|xixi}}
<!-- {{要过滤的数据|(管道符号)过滤器的名字}} -->
</div>
<script>
let vm=new Vue({
el:"#app",
data:{
time:'100'
},
filters: {
"xixi":(data)=>{
return data/2
}
}
})
</script>
结果也为50,
我们可以看到局部和全局唯一不同的地方就是在于创建,局部过滤器是作为组件的配置项去创建的。