举例说明如何在Vue中创建和使用过滤器_0

时间：2023-03-13 04:02:57 科技观察

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

过滤器定义必须始终在主Vue实例之上，否则会Geta解析过滤器失败：toUSD错误。//DECLARATIONVue.filter('toUSD',function(value){return`$${value}`;});newVue({el:'#app',data:{price:351.99}});//用法{{price|toUSD}}

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

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