学习Vue过滤器总结

今天主要学习了Vue的过滤器。过滤器和我们之前学习过的方法、计算属性比较相似，当然大家都有各自的优缺点，只是它比较方便直接，同样用方法和计算属性也能完成像过滤器一样的功能，首先这个过滤器也是写在我们Vue实例里面的，统一放在filters内，在过滤器内同样是写我们要对数据做的操作，只不过体现在标签上的语法有不同，这里用到了一个新的符号（管道符）来分隔参数和过滤器，管道符前面的数据（data内的数据）作为参数传入给管道符后面的过滤器内进行对应的操作，这里有个很关键的点就是它可以接收额外的参数，第一个参数默认就是刚才说到的要处理的数据（第一个参数不管手动传不传都是一样的），第二个参数是第一个参数处理完之后接到该值，接到第一次处理完的值后如需再进行第二次处理，那么第二个参数就是二次要处理数据时传入的参数，比如：格式化字符串，转换大小写之类的，通俗点来说就是可以对数据进行两次操作，这里有个细节就是第二个参数我们不知道有没有传来的时候可以给第二个参数设置一个默认值，这样就可以保证两个参数都有了。过滤器还有一个很厉害的地方，就是过滤器和过滤器之间是可以串联的，也就是说刚才的两次操作还不能满足需求还需要对数据进行第三或更多次操作时，我们可以在过滤器后面加多一个管道符，第二个管道符后面继续写过滤器就可以实现串联的效果了。过滤器还有一个不同于方法和计算属性的地方，那就是过滤器可以配置全局，也就是说在二个容器内容的数据可以调用同一个过滤器，语法相对来说也很好理解，就是把filter从Vue实例对象中拿出来，放到Vue实例对象的外面即可起到全局的作用。但话说回来，虽然过滤器有很多的优点，主要还是因为它方便（可以直接在标签内书写），但缺点就是不适合用来对数据进行大量的计算（方法和计算属性在这方面可以取代过滤器），一般适用于一些简单的逻辑处理，比如购物网站的价格，后台传过来的一般是1999元，我们就需要对这个1999格式化一下为1,999元，这样就更加的好看明了啦。