Vue知识点总结(8)——filter过滤器（超级详细）

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

Vue为我们提供了两种过滤器的使用，分别是局部过滤器和全局过滤器。
过滤器的作用，其实就可以简单理解为，为数据添油加醋。
比如，我们后台给我们返回了一堆的商品的价格，后台只是给我们提供了阿拉伯数字12345，但是我们前端需要展示的时候，大部分是要带上￥$这种单位符号的。这时候，就轮到我们过滤器发挥了。

下面是局部过滤器的使用场景和基本语法格式：

<div id="app">
    <h3>{
    {price | myPrice('￥')}}h3>
div>  

<script>
    var app = new Vue({
     
        el:'#app',
        data:{
     
            price:10,
        },
        // 局部过滤器
        filters: {
     
            myPrice:function(price,a){
     
                return a + price;
            }
        }
    });
</script>

这就是我们提到的，给价格添加单位的场景，我们在vue实例中，写了一个和data同级的属性filters:{}，我们用 | 和{ {}}中的数值进行了绑定，然后在myPrice中，就可以操作我们的数值了，而且是批量操作的，并且可以携带参数。

这样我们就可以批量给数据“添油加醋了”。

下面我们说一下全局过滤器的注册和使用：

   <div id="app">
        <h3>{
    {msg | myReverse}}h3>
    div>  

<script>
    Vue.filter('myReverse',(val) => {
     
        return val.split('').reverse().join('');
    })
    var app = new Vue({
     
        el:'#app',
        data:{
     
            msg:'hello 过滤器'
        }
    });
</script>

我们注册了一个全局的过滤器，用于反转msg字符串的内容。
用法和局部过滤器一样， | 关联。

这就是局部过滤器和全局过滤器的基本语法格式和应用场景。

要根据具体的业务需求，将其应用进去。
当你觉得用现在的方法处理现在的业务场景很繁琐、很反人类、浪费很多不必要的时间的时候，一定是你有技术没有用到。
Vue发展了这么久，多次的版本更新，现在的生态已经很棒了，要多将Vue提供的技术应用到实际的开发中，这样才能体现出框架的价值，提高程序员的工作效率。

有微信小程序课设、毕设需求联系个人QQ：505417246

关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号，请大家多多关注，谢谢！