Vue学习之--------Vue中过滤器(filters)的使用(代码实现)(2022/7/18)

网友投稿 576 2022-09-04

Vue学习之--------Vue中过滤器(filters)的使用(代码实现)(2022/7/18)

Vue学习之--------Vue中过滤器(filters)的使用(代码实现)(2022/7/18)

1、过滤器

1.1 概念

过滤器:

定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。语法:1、注册过滤器:Vue.filter(name,callback) 或 new Vue{filters:{}}2、使用过滤器:{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”

备注:

1、过滤器也可以接收额外参数、多个过滤器也可以串联2、并没有改变原本的数据, 是产生新的对应的数据

1.2 代码实例

标题

格式化后的时间

现在是(计算属性实现):{{formatTime}}


现在是(method实现):{{getformatTime()}}


现在是(过滤器实现):{{time | timeFormater}}


现在是(过滤器实现同时传参):{{time | timeFormater('YYYY-MM-DD')}}


现在是(过滤器实现同时传参(多个过滤器的联合使用)):{{time | timeFormater('YYYY-MM-DD') | mySlice}}