Vue中的过滤器

Vue中的过滤器

文章目录

​​案例​​​​使用计算属性完成​​​​使用methods实现​​​​使用过滤器实现​​​​全局过滤器​​​​其他的使用场景​​​​过滤器总结​​

过滤器并非一个必须要使用的东西，它只是Vue给我们提供的一种数据处理方式。想用就用，不想用可以使用其它的办法进行替换(例如计算属性，methods方法)

案例

我们经常会遇到一种情况：将时间戳格式化为特定的形式。现在我们使用三种方法来完成这个需求：

计算属性methods方法过滤器

效果如下：

使用计算属性完成

我们在这里可以引用第三方库。我们在bootCDN.cn上面可以找到，其中较为好用的时间第三方库是​​moment.js​​：

他的功能非常强大，不过它的体积稍微有点大。我们可以使用他的轻量化版本​​dayjs​​:

打开GitHub查看其使用文档：

代码如下：

使用methods实现

代码如下：

使用过滤器实现

使用步骤：

先写正常要展示的数据配置过滤器

代码如下：

注意：

格式：​​原始数据 | 过滤器的名字​​过滤器的本质就是函数我们要为过滤器添加新的配置项filter才能使用执行过程：首先捕获到{{}}中的东西，再读取time，随后把time作为参数传给timeFormater也就是过滤器，最后使用过滤器的返回值将{{}}进行替换呈现

过滤器还可以传递参数，例如我们可以这样：

效果：

不管你写不写这个value，他都是会默认给我们传进去的

过滤器还可以串联 例如我们接着上面的案例，现在我们只显示年份：

过程如图：

先将time交给第一个过滤器timeFormater，timeFormater工作之后的结果再交给下一个过滤器mySlice。time不会交给mySlice直接处理的，而是一层层的处理的。同时还要注意：我们在Vue中的filters中配置的过滤器，都是局部过滤器

也就是说在别的Vue实例或者别的组件中是不能共用的。

全局过滤器

我们可以把上面一个案例中的mySlice配置为全局过滤器，代码如下：

注意：

要在new Vue的实例对象之前就配置好全局过滤器只能一个个的配置

其他的使用场景

除了在插值语法中可以使用过滤器之外，我们还可以在v-bind中使用，例如：

过滤器总结

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。