VUE 过滤器(filter)

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

{{percent | percent_fitter}}

//v-bind
<div v-bind:id="rawId | formatId"></div>

filter默认会让percent为第一个参数,如果要多个参数的话在写在filter(参数一,参数二),第一个参数总是percent,表达式和字符串都可以作为参数,还可以同时使用多个过滤器

    <div>{{price | filter_addPricePrefix |filter_addPriceSuffix}}</div>

同时使用多个过滤器的时候,第一个过滤器的结果作为第二个过滤器的参数

全局filter

在main.js注册

Vue.filter('filter_addbfh', function (value) {
  return value + '%';
})

如果项目有多个过滤器,可以封装到一个ji文件,然后在main.js循环注册

import * as filters from '@/filters'
Object.keys(filters).forEach(key=>{
    Vue.filter(key,filters[key])
})

直接在项目中使用管道符使用就好了

局部filter

<script>
export default {
  data() {
    return {
      price: 100
    };
  },
  filters: {
    filter_addbfh(value) {
      return value + '%';
    }
  }
};
</script>

在script标签 filters里面定义就好了