Vue中的过滤器filter

在Vue框架中规定了语法规范，在传入的new Vue()时，规定了对象的属性名哪些能够生效，在这之前我们已经学习了三个属性：el绑定关联标签 ；data是内是框架使用的数据；methods存放方法。

这里我们学习一个新的属性filters，在里面也是书写方法。将同一个方法写在它与methods执行并没有什么区别，但是为什么要用一个filters来存放方法呢？

区别：

1、在开发项目时，我们一般将methods里的方法用于处理业务，filters里的方法用于处理数据，这样层次会更鲜明，但是如果你非要将处理数据的方法放在methods里面也不会出错。

2、过滤器只能用在v-bind或者插值表达式中

3、调用传参的写法上，methods的方法在调用时通过()传参，如{{ fn(str) }}；filters的方法在调用时将参数放在前|方法名写在后，如{{str|fn}}

注意：{{str|fn}}调用filters里的方法可以连调，上一次调用的返回值会当作参数传入下一次参数传入下一个参数，如{{str|fn|fn1|fn2}}

写一个小栗子：利用过滤器处理一下出生日期得到岁数

 <div id="box">
        {{msg|getyear}}
    </div>

    <script>
        new Vue({
            el:"#box",
            data:{
                msg:"1999-9-9"
            },
            filters:{
                getyear(str){
                    let year=new Date().getFullYear()-new Date(str).getFullYear()
                    return year+"岁"
                }
            }
        })
    </script>

return的返回值放在{{}}中显示到页面上。

效果：