Vue-filter(过滤器-08)
过滤器:
过滤器分为全局和私有。
有的时候,页面上显示的数据信息格式不符合要求,就可以通过过滤器转换成用户需要的样子,
过滤器本质就是函数,可以对数据信息进行 二次加工处理 操作。
例如:
再比如把时间戳改变成我们想要的格式:
注意:
过滤器只可以用在两个地方: 插值表达式和 :冒号 属性绑定表达式。
过滤器应该被添加在 JavaScript 表达式的尾部,由“|竖线”连接;
(一)全局过滤器
给Vue通过filter
方法声明的过滤器是全局的,该Vue的所有实例都可以使用
语法:
再比如:
↓
效果:
(二)私有过滤器
Vue实例化过程中,与el、data平行的位置声明filters
成员并在其中制作过滤器,这个过滤器只能被被当前Vue渲染的页面使用,称为 "私有过滤器" 。
语法:
全局和私有过滤器取舍:
大多数情况下,全局 和 私有过滤器 都可以使用,但是有的时候,我们并不能直面Vue构造函数(例如后期接触的组件),这时候就只能乖乖使用 私有过滤器 了
私有过滤器Dome:
↓
效果:
(三)传递参数:
有的时候,过滤器主体功能不变化的情况下,可能结果的形式根据业务要求有所调整,这样可以通过给过滤器传递参数实现。
过滤器函数 第一个形参是被处理数据,第二、三...形参 接收过滤器传递过来的实参
传递参数Dome:
效果:
不给传递参数的情况下-就会都变成大写:
(四)过滤器字符串相关的方法:
(五)多个过滤器:
多个过滤器一起使用Dome:
效果:
以上是 Vue-filter(过滤器-08) 的全部内容, 来源链接: utcz.com/z/378091.html