如何通过示例在Vue中创建和使用过滤器

时间：2023-03-31 20:25:10 vue.js

作者：EdZynda。已经收录在网站上，也整理了更多往期好评文章，也整理了很多我的文档和教程资料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。与AngularJS类似，Vue.js有自己的数据转换和过滤方法，但必须记住，过滤器不会改变原始数据，它们只会改变输出并返回过滤后的数据。过滤器在很多不同的情况下都很有用，比如保持API响应尽可能干净，以及在前端操纵数据格式。在您希望通过将所有逻辑封装在可重用代码块后面来避免重复和链接的情况下，它们也非常有效。定义和使用过滤器在Vue中，我们可以通过两种不同的方式注册过滤器：全局和本地。前一种方法可以访问所有组件中的过滤器，而后者只能使用定义组件的组件内部的过滤器。过滤器是简单的JS函数，它将要转换的值作为第一个参数，但也可以传入尽可能多的其他参数，因为它们希望返回该值的格式化版本。全局过滤器全局过滤器看起来像这样：//在这个例子中，我们将注册一个全局过滤器以在价格前加上美元符号：//DeclareVue.filter('toUSD',function(value)){return`$${value}`}//使用{{351.99|toUSD}}

过滤器定义必须始终在主Vue实例之上，否则您将收到Failedtoresolvefilter:toUSD错误。//DECLARATIONVue.filter('toUSD',function(value){return`$${value}`;});newVue({el:'#app',data:{price:351.99}});//用法{{价格|toUSD}}

本地过滤器本地过滤器注册在Vue组件范围内，让我们看看如何创建它：//在这个例子中，我们将创建一个过滤器以将字符串大写。//声明newVue({el:'#app',data:{name:'scotch.io'},filters:{//过滤器定义Upper(value){returnvalue.toUpperCase();}}});//用法{{名称|上}}

如上例所示，本地过滤器作为“过滤器”属性内部的函数存储在Vue组件中。我们可以注册任意多个：...filters:{Upper(value){returnvalue.toUpperCase();},Lower(value){returnvalue.toLowerCase();},}....附加参数设置如我们在本文介绍中提到的，过滤器可以根据需要接受任意多的参数//DeclarationVue.filter('readMore',function(text,length,suffix){returntext.substring(0,length)+suffix;});newVue({el:'#app',data:{text:'Loremipsumdolorsitamet,consecteturadipisicingelit.earumeligendisuscipitlaborumquod.'}});//用法{{text|readMore(10,'...')}}