对数据进行二次的处理,得到我们想要的数据
对常用文本的格式化操作,过滤器也分为全局过滤器和局部过滤器
局部过滤器:
在页面内和data同一层级
Filters:{
过滤器1( ){
},
过滤器2( ){
},
……
}
全局过滤器:
在main.js里面
Vue.filter(过滤器的id,( ) => { })
过滤器的使用
{{要格式化的文本 | 过滤器的名称}}
注意事项:
- 过滤器需要return返回值
- 过滤器内没有this指向
- 过滤器接收参数,接收的第一个参数就是管道符前面的文本
- 过滤器可以接收多个参数
{{要过滤的文本 | 过滤器的名称(第二个参数,第三个参数……)}}
- 不会改变原始值,只会返回新值
- 过滤器可以串联使用,并且上一个过滤器的返回值是下一个过滤器的参数
<div>
<p>num: {{num}}</p>
<p>num1: {{num1}}</p>
<p>{{(num + num1) | guolvqi1}}</p>
<p>{{num | guolvqi1(num1) | guolvqi2}}</p>
</div>
script部分
data:function(){
return {
num: 0,
num1: 10
}
},
filters:{
guolvqi1(num,a){
console.log('this',this)
if(!a){
return '¥' + num
}else{
return '¥' + (num+a)
}
},
guolvqi2(a){
return 'haha' + a
}
}