Vue-filter(过滤器-08)

vue

过滤器:

过滤器分为全局和私有。

有的时候,页面上显示的数据信息格式不符合要求,就可以通过过滤器转换成用户需要的样子,

过滤器本质就是函数,可以对数据信息进行 二次加工处理 操作。

例如:

再比如把时间戳改变成我们想要的格式:

注意:

  • 过滤器只可以用在两个地方: 插值表达式和 :冒号 属性绑定表达式。

  • 过滤器应该被添加在 JavaScript 表达式的尾部,由“|竖线”连接;

(一)全局过滤器

给Vue通过filter方法声明的过滤器是全局的,该Vue的所有实例都可以使用

语法:

再比如:

效果:


(二)私有过滤器

Vue实例化过程中,与el、data平行的位置声明filters成员并在其中制作过滤器,这个过滤器只能被被当前Vue渲染的页面使用,称为 "私有过滤器" 。

语法:

全局和私有过滤器取舍:

大多数情况下,全局 和 私有过滤器 都可以使用,但是有的时候,我们并不能直面Vue构造函数(例如后期接触的组件),这时候就只能乖乖使用 私有过滤器 了

私有过滤器Dome:

效果:


(三)传递参数:

有的时候,过滤器主体功能不变化的情况下,可能结果的形式根据业务要求有所调整,这样可以通过给过滤器传递参数实现。

过滤器函数 第一个形参是被处理数据,第二、三...形参 接收过滤器传递过来的实参

传递参数Dome:

效果:

不给传递参数的情况下-就会都变成大写:


(四)过滤器字符串相关的方法:


(五)多个过滤器:

多个过滤器一起使用Dome:

效果:

以上是 Vue-filter(过滤器-08) 的全部内容, 来源链接: utcz.com/z/378091.html

回到顶部