在生活中把一些含有我们需要的东西但是比较粗旷通过一定的装置过滤出更接近需要的产品，这个装置大概就是过滤器。比如：过滤沙子的纱网，经过纱网过滤可以得出精细的沙子；程序编写通常也会有很多类似的骚操作，在vue中提供自定义过滤器，得到更需要的精准数据，来了解一下

需求：

展示一个产品的价格price。

解析需求：

产品的价格可能包含小数点，可能该产品还未定义用‘--’来表示

开发需求

前端从后端获取一个价格数据字段price，这个字段可能包含的结果是null，‘ ’，或者是undefined ，这个时候在页面用‘——’展示，如果是正常的数据如10.99 就直接显示

以下所有的代码均在vue中开发实现

JavaScript思维原生实现

定义一个方法来来处理，获取到的数据，处理然后使用

vue的HTML模板

<div id="app">
    {{price}}元
 </div>

JavaScript

export default {
  name: 'App',
  data (){
    return {
      price:''
    }
  },
  created() {
      // 模拟后台动态获取数据
    setTimeout(()=>{
        // 00，‘’，null 等行为
      let ajaxPrice='11.00';
       this.formatPrice( ajaxPrice)
    },1000)
  },
  methods: {
    formatPrice(value){
      if (value === null || value === '' || value === undefined) {
       this.price ='--';
      }
      this.price = value;
    }
  },
}

这样就可以完美的实现数据格式的转变，在整个js代码中没有任何问题，同样也可以扩展，那么为什么vue还要高一个自定义过滤器？先用vue的过滤器来实现以下看看。有什么区别

vue过滤器实现

vue的HTML模板

<div id="app">
    {{price|formatPrice}}元
  </div>

vue过滤器的实现部分

filters:{
    formatPrice(value){
      if (value === null || value === '' || value === undefined) {
       return '--';
      }
      return value;
    }
  }

明显区别：

1、JavaScript 通过在业务代码中添加方法，达到格式化的目的；vue定义的过滤器则剥离开业务代码，在模版中格式化，更具有可读性和选择性 2、JavaScript原生思维语意话不明显，vue过滤器直接就知道该方法是用了过滤格式化的filters {}里面定义，更加规范 3、减少变量的耦合性，JavaScript中定义了中间变量来处理，vue过滤器则不需要

估计还有其他区别，需要明确的是在整个vue项目中的对比，想表达的是在vue项目中就按照vue的框架办事，可以事半功倍

vue过滤器

vue 官网文档定义：

1、用于一些常见的文本格式化 2、用在双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持) 3、添加在 JavaScript 表达式的尾部

使用的地方

一、在双花括号中使用，如上面价格的例子

  {{price|formatPrice }}元

由“管道”符号来实现 formatPrice 可以理解为过滤器函数，而price就是需要格式化的数据，通过vue特定的方式传递到formatPrice函数进行处理最终得到格式化的数据

二、在 v-bind 中属性格式化

<div id="app" :sr='price|formatPrice'>
</div>

结果和在双花括号是是一样的

综上所述，使用很简单，语意也很明显，维护方便一眼便知

那么如何定义过滤器呢！

定义过滤器（实现方式）

一、直接在组件或者单文件组件是使用，如上面单例子

export default {
  name: 'App',
  data (){
    return {
      price:''
    }
  },
filters:{
    formatPrice(value){
      if (value === null || value === '' || value === undefined) {
       return '--';
      }
      return value;
    }
  },
  created() {
    // 价格异步加载
    setTimeout(()=>{
      let ajaxPrice='11.00';
      // 判断报价数据内容
        this.price = ajaxPrice
    },1000)
  }
}

过滤器单方法直接定义在filters:{} 对象里面，这种在组件里面定义，称为：局部过滤器，这个是在new实例之后才调用。

二、在创建 Vue 实例之前全局定义过滤器换个地方实现过滤器结果都是一样，实现价格单格式化

// 全局注册 任何地方都可以用
Vue.filter('formatPrice',function(value) {
      if (value === null || value === '' || value === undefined) {
       return '--';
      }
      return value;
    })
// new VUE
new Vue({
  render: h => h(App),
}).$mount('#app')

这个就是全局绑定，一处绑定到处可以用，使用方法都是一样丝毫无差，结果都是一样，

  {{price|formatPrice }}元

通常在同一个项目中出现两个地方使用，就可以作为全局的方法实现；

注意

当全局过滤器和局部过滤器重名时，会采用局部过滤器。

三、引用外部js文件做为过滤器在中大型项目中，建议采用外部引用js来实现过滤器。达到公用的目的。多人维护。引入外部js文件，通常采用的是全局绑定的方法。

建立一个js文件夹吧，名字就叫filters，里面可以放很多js文件。用来些很多过滤器。哈哈

+filters
  -index.js

示例代码还是上面的价格展示：index.js

export function formatPrice(value) {
    if (value === null || value === '' || value === undefined) {
    return '--';
  }
  return value;
}

通过es6的语法export 导出就可以，当然可以导出多个

全局绑定需要在new vue之前

....省略
//导入
import * as filters from './filters'
// 通过 mixin 混入
Vue.mixin({
  filters:{
    ...filters
  }
});
// new 
new Vue({
  render: h => h(App),
}).$mount('#app')

这样就完成了哦，使用方法是一毛一样的

  {{price|formatPrice }}元

补充说明

一、过滤器函数除了接受默认参数，还支持多个参数传递：比如价格保留两位数或者三位数

  {{price|rounding(2)}}元

这个时候,rounding 的第一个参数是 price，第二个参数是2，保留两位小数，现在添加外部js代码

export function rounding(value, decimal) {
  if (value === '--') {
    return value;
  }
  return Number(value).toFixed(decimal);
}

二、过滤器同时还支持过滤器接着过滤

  {{price|filterA | filterB }}元

这个执行的的是 price传递给filterA进行过滤，接着 filterB过滤filterA的结果，得到最终的展示效果，刺激吧。哈哈

技术不断更新。持续关注官网吧

转载请注明：百网思 » vue 过滤器实现和使用场景举例

vue 过滤器实现和使用场景举例

需求：