Vue 2.0的学习笔记:Vue的过滤器

在这篇文章里,我们将讨论一个叫过滤器的东西。过滤器提供了一种执行文本转换的方法,比如说都转成大写字母或者几乎做任何我们想做的事情。过滤器既可以在文本插值中使用,也可以在v-bind指令的表达式中使用。

在Vue中使用过滤器(Filters)来渲染数据是一种很有趣的方式。首先我们要知道,Vue中的过滤器不能替代Vue中的methodscomputed或者watch,因为过滤器不改变真正的data,而只是改变渲染的结果,并返回过滤后的版本。在很多不同的情况下,过滤器都是有用的,比如尽可能保持API响应的干净,并在前端处理数据的格式。在你希望避免重复和连接的情况下,它们也可以有效地封装成可重用代码块背后的所有逻辑。不过,在Vue 2.0中已经没有内置的过滤器了,我们必须要自己来构建它们。

接下来,来学习Vue中有关于过滤器更多的知识。如何创建和使用它们。感兴趣的同学,接着一起往下看吧。

Vue默认过滤器

如果你不是第一次接触Vue的话,你应该知道Vue 2.0以前的版本是有内置的过滤器,但是他们从Vue 2.0版本中删除了。Vue的作者是这样说的:

内置的过滤器是有用的,但它们缺乏纯JavaScript的灵活性。当一个内置函数不适合您的需求时,您最终会重新实现类似功能(在最终代码中,内置的代码就成无用代码,死代码),或者必须等待Vue更新它们并发布新版本。

知道Vue内置的过滤器只有在Vue 2.0以前版本中有就可以,不过你要是对旧版本的内置过滤器感兴趣的话,可以到官网浏览旧版本指南或教程。在这里有一个旧的内置过滤器的完整列表,以防你想了解更多关于它们的信息。

不过我们今天要学习的可不是Vue旧版本的内置过滤器,咱们学习如何在Vue 2.0版本中自定义过滤器。

定义和使用过滤器

使用Vue,可以有两种不同的方式注册过滤器:全局和本地过滤器。你可以跨所有组件访问全局过滤器,而本地过滤器只允许你在其定义的组件内部使用。

我们可以定义本地(在某一个template里面定义filter)过滤器,或者定义全局(global)过滤器。需要提醒的是,如果你定义了一个全局过滤器,它必须在Vue实列之前定义,以上两种方式,我们将传递value作为参数。

因为过滤器是简单的JavaScript函数,它们将值转换为第一个参数,但是你也可以传入其他许多参数,因为你需要返回该值的格式化版本。

全局过滤器

来看一个简单的示例。下面这个示例演示的是注册一个全局过滤器,其作用就是在价格前面加上美元符号:

// 声明一个全局的过滤器
Vue.filter('toUSD', function (value) {
    return `$${value}`
})

// 在模板中这样使用 文本插值的使用方式
<div id="app">
    <h1>{{ price | toUSD}}</h1>
</div>
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/vue/how-to-create-filters-in-vuejs.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部