过滤器用于格式化一些数据
语法 :
数据 | 过滤器名字
例子:
<template>
<div>
{{name | lowercase}}
</div>
</template>
<script>
import Vue from 'vue'
Vue.filter('lowercase', (e)=>{
return e.toLowerCase();
});
export default {
data(){
return{
name : 'TOM'
}
}
}
</script>
上面的例子为全局的过滤器。如果要定义局部的过滤器,则如下 :
<template>
<div>
{{name | lowercase}}
</div>
</template>
<script>
export default {
data(){
return{
name : 'TOM'
}
},
filters:{
lowercase(e){
return e.toLowerCase();
}
}
}
</script>
过滤器传参
例子:
<template>
<div>
{{price | addIcon('$')}}
{{price | addIcon('¥')}}
</div>
</template>
<script>
export default {
data(){
return{
price : 100
}
},
filters:{
addIcon(e, icon){
return e + icon;
}
}
}
</script>