05. 过滤器

过滤器用于格式化一些数据

语法 ：

数据 | 过滤器名字

例子：

<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>