vue过滤器的使用

前言

Vue允许用户自定义过滤器，对于一些常见的文本格式化、剔除错误的格式或字符、文本中增加一些公用的报文头或报文尾内容，需要使用到过滤器。如：对输入的文本进行检查，将所有的字符转换为大写；或者对金额类的属性前增加“￥”符号等。

局部过滤器

在某个组件内部定义的过滤器称为局部过滤器。在vue2.X及以上版本中定义相应的filter，filter的地位同Data、mothod、computed平行，Filter的定义格式为

      filters: {   //fiters标签，与data、mothod平行
        moneyFilter: function (value,num,type) {   // moneyFilter为过滤器名称
         //具体规则
        }  
  }

function里第一个参数value默认为使用这个过滤器的data对象内的值，第一个参数必须为自身的值，后面可以加任意多的参数，顺序不能颠倒。
过滤器应用在view中，在vue2.0及以上版本中，过滤器的使用需借助于管道符 “|”，管道符只能用在文本插值{{}}或v-bind 语句中。如：金额过滤器（moneyFilter）使用如下：

<div>{{money|moneyFilter(2,'元')}}</div>  
或者  
<div v-bind: money="money|moneyFilter(2,'元')"></div>  

其中money为过滤器中第一参数value，也就是数据本身的值，第二、第三参数是过滤其中需要使用到的参数
示例：编写过滤器，对字串首字母完成大写，并将字符中双引号转换为单引号。
代码如下：

<template>    
  <div id="example">      
    <span>{{message|capitalize|changes}}</span> <!--capitalize:首字母大写，在插值语法中使用—>  
  </div>    
</template>    
  
<script>  
export default {    
 name: 'EventHandle',   
 data () {    
        return {    
         message:'application is style'    
        }    
      },    
      filters: {      //定义过滤器  
        capitalize: function (value) {    
         if (!value) return ''    
         value = value.toString()    
         return value.charAt(0).toUpperCase() + value.slice(1)    
        }，  
        changes：function（value）{  
          value.replace(/\"/g,"'")  
        }  
      }  
  }   
</script> 

示例中定义了两个过滤器，capitalize 完成首字母大写，changes完成双引号向单引号转换，capitalize和changes使用管道符连接，管道符能将上一个过滤器输出内容作为下一个过滤器的输入内容。

全局过滤器

在实际开发中，很多组件需要使用到的过滤器，如：日期格式化、金额格式化功能，通常采用全局过滤器。使用时首先把过滤器处理函数给抽离出去，统一存放在一个独立的.js文件中，然后在main.js中 导入这个.js文件，使用Object.keys()方法，得到一个由key组成的数组，遍历数据，让key作为全局过滤器的名字，这样在任何一个组件都可以根据过滤器的名称匹配使用全局过滤器了。
【示例】：定义全局过滤器，完成金额前加“￥”符号，日期输出格式统一为xxxx年xx月xx日，具体实现过程如下，首先在src目录下创建文件夹fiters，在此文件下创建index.js文件，代码如下：

//日期格式过滤器  
let dateServer = value => {  
  return value.replace(/(\d{4})(\d{2})(\d{2})/g, "$1年$2月$3日");  
};  
//金额格式过滤器  
let moneyFilter = (value, num, type) => {  
  return "￥" + value.toFixed(num) + type;  
};  
  
export { dateServer, moneyFilter};

其次，在main.js引入改文件，代码如下

import Vue from 'vue'
import App from './App'
import router from './router'
import * as custom from "./filter/index.js";

Object.keys(custom).forEach(key => {
  Vue.filter(key, custom[key]);
	});
	
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

使用时代码和局部过滤器组件使用类似，如果管道符匹配到相应过滤器名称时，执行过滤器中的代码。代码如下

<template>
  <div class="hello">
    <h1>{{atm|moneyFilter(2,'元')}}</h1>
    <span>{{currDate|dateServer}}</span>
  </div>
</template>

<script>
export default {
  name: 'parent',
  data () {
    return {
      atm: 125,
      currDate: '20211225'
    }
  }
}
</script>

<style>
</style>

其中atm和currDate自动匹配全局过滤器中函数，运行结果如下：