过滤器 ( Filters )是 vue 为开发者提供的功能,常用于 文本的格式化 。过滤器可以用在两个地方: 插值表达式 和 v-bind 属性绑定 。 过滤器应该被添加在 JavaScript 表达式的 尾部 ,由“ 管道符 ”进行调用,示例代码如下:

定义局部过滤器

连续调用多个过滤器
过滤器可以 串联地 进行调用

重点
1、全局过滤器
注:过滤器默认接收的参数就是默认需要过滤的参数
1、1新建dfilter.js文件
函数的作用检验过滤器是否被执行

1.2 main.js引入并注册过滤器以及方法
Vue.filter(key,value) key就是过滤器键名,value就是过滤器方法体

1.3 全局使用




2、组件内过滤器
2.1常用用法


如果需要对同一个数据进行多次过滤,可用竖杠并起来,如下:

2.2、进阶用法
也可以对组件内按钮样式进行过滤
原理:当过滤器的return值为"XXXX"写死的值时,则直接用“XXXX”替换被过滤数据
如:



动态改变按钮样式


网友评论