vue过滤器filter的使用

在 vue2.0 之前,是有内置过滤器的,在2.0中已经没有内置的过滤器了,但我们可以自定义过滤器。

关于 vue 过滤器,在官方文档中是这样说明的:

Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示。

即过滤器是用来格式化数据的一个函数。过滤器不会修改原始数据,它的作用是过滤数据,就是对数据进行加工处理并返回处理后的数据,比如做一些数据格式上的修改,状态转换等。

过滤器分为两种

组件内的过滤器(组件内有效)

全局过滤器(所有组件共享)

定义过滤器

第一个参数是过滤器的名字

第二个参数是过滤器的功能函数 (若不定义vue就不知道这个字符串是什么,有什么作用)。

过滤器的功能函数

声明 function(data,argv1,argv2...){}

第一个参数是传入的要过滤的数据,即调用时管道符左边的内容。

第二个参数开始往后就是调用过滤器的时候传入的参数。

过滤器的使用

先注册,后使用

组件内 filters:{ 过滤器名: fn } fn 内通过 return 返回最终的数据

全局 Vue.filter(\'过滤器名\',fn) fn 内通过 return 返回最终的数据

使{{ 数据 | 过滤器名 }}

// 使用过滤器时需要添加管道符号( | )作为分隔,管道符 | 右边是过滤器名称,即文本的功能函数 <!-- 在双花括号中 --> {{ message | 过滤器名称 }} ​ <!-- 在 `v-bind` 中 --> <div v-bind:id="id | 过滤器名称"></div>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzxzyj.html