1. 什么是过滤器？

 说到过滤，我们生活中也经常有过滤的操作，洗菜用筛子过滤掉水，实验室做化学实验过滤掉杂质。

而开发中的过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。

2. 过滤器的定义和举例

过滤器分为局部和全局过滤器

局部过滤器

new Vue({       
 filters: {      
    '过滤器名称': function (value1[,value2,...] ) { 
       // 逻辑代码     
      } 
         }    
　　})

举例

一般银行账户的金额，都需要一定的格式化，保留2位小数

//格式
<!-- 在双花括号中 -->
<div>{{数据属性名称 | 过滤器名称}}</div>
<div>{{数据属性名称 | 过滤器名称(参数值)}}</div>

html

template>
    <div>
        <h3>过滤器</h3>
        <h4>格式化工资</h4>
        <p>{{money|moneyFormat}}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            money:3333
        }
    },
    filters: {
        moneyFormat(value) {
            return '¥' + Number(value).toFixed(2)
        }

    }
}
</script>

image

全局过滤器

Vue.filter('过滤器名称', function (value1[,value2,...] ) {  

//逻辑代码

})

在main.js中写全局过滤器

Vue.filter('globalMoneyFormat', function(value) {
  return '¥' + Number(value).toFixed(2)
});

组件中代码

<template>
    <div>
        <h3>过滤器</h3>
        <h4>格式化工资</h4>
        <p>{{money|globalMoneyFormat}}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            money:13333
        }
    }
}
</script>