Vue|Vue中的过滤器 javascript|前端|vue.js

文章目录

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

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

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

计算属性
methods方法
过滤器

【Vue|Vue中的过滤器】效果如下：

文章图片

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

文章图片

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

文章图片

打开GitHub查看其使用文档：

文章图片

代码如下：

Document - 锐客网 type="text/javascript" src="https://www.it610.com/VueEnvironment/vue.js"> type="text/javascript" src="https://www.it610.com/VueEnvironment/dayjs.min.js"> 显示格式化后的时间现在是：{{fmtTime}} > new Vue({ el:'#root', data:{ time:new Date().getTime() }, computed:{ fmtTime(){ return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss') } } })

使用methods实现代码如下：

显示格式化后的时间现在是：{{getfmtTime()}} > new Vue({ el:'#root', data:{ time:new Date().getTime() }, methods: { getfmtTime(){ return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss') }}, })

使用过滤器实现使用步骤：

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

代码如下：

显示格式化后的时间现在是：{{time | timeFormater}} > new Vue({ el:'#root', data:{ time:new Date().getTime() }, filters:{ timeFormater(value){ return dayjs(value).format('YYYY年MM月DD日 HH:mm:ss') } }})

注意：

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

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

显示格式化后的时间现在是：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}} 现在是：{{time | timeFormater('YYYY年MM月DD日 HH:mm:ss')}} > new Vue({ el:'#root', data:{ time:new Date().getTime() }, filters:{ timeFormater(value,str){ return dayjs(value).format(str) } }})

效果：

文章图片

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

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

显示格式化后的时间现在是：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}} 现在是：{{time | timeFormater('YYYY年MM月DD日 HH:mm:ss')}} 现在是：{{time | timeFormater('YYYY年MM月DD日 HH:mm:ss') | mySlice()}} > new Vue({ el:'#root', data:{ time:new Date().getTime() }, filters:{ timeFormater(value,str){ return dayjs(value).format(str) }, mySlice(value){ return value.slice(0,4) } }})

过程如图：

文章图片

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

文章图片

也就是说在别的Vue实例或者别的组件中是不能共用的。
全局过滤器我们可以把上面一个案例中的mySlice配置为全局过滤器，代码如下：

显示格式化后的时间现在是：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}} 现在是：{{time | timeFormater('YYYY年MM月DD日 HH:mm:ss')}} 现在是：{{time | timeFormater('YYYY年MM月DD日 HH:mm:ss') | mySlice()}} > Vue.filter('mySlice',(value) => {return value.slice(0,4)})new Vue({ el:'#root', data:{ time:new Date().getTime() }, filters:{ timeFormater(value,str){ return dayjs(value).format(str) }, }})

注意：

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

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

显示格式化后的时间现在是：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}} 现在是：{{time | timeFormater('YYYY年MM月DD日 HH:mm:ss')}} 现在是：{{time | timeFormater('YYYY年MM月DD日 HH:mm:ss') | mySlice()}} > Vue.filter('mySlice',(value) => {return value.slice(0,4)})new Vue({ el:'#root', data:{ time:new Date().getTime(), name:'csdn哈哈哈' }, filters:{ timeFormater(value,str){ return dayjs(value).format(str) }, }})