在学习vue的时候 我们会经常见到这样的表达式:
{{ message | capitalize }}

这是在一个插值表达式中放了一个过滤器 capitalize是个将message值转化为大写的一个函数,在这个表达式中value会被作为capitalize的一个参数传进函数中进行处理 为了表示这个过程 我们在参数和过滤器(函数)之间放一个‘|’来表示这么一个过程 这就是管道符的作用
另外过滤器这个函数我们会在vue的filters方法中去写 如:
在这里插入图片描述
有些小伙伴可能会有和我一样的疑问 为什么要出现过滤器这么一个东西呢 ?过滤器能处理的事情好像直接写一个函数也能处理
确实 一定要用正常的函数来处理这个数值也是可以的 但是会有很多麻烦 想象一下这么一个场景:
我们通过请求获取到了一个数组 数组中有很多数据 这时候我们使用v-for将数据渲染到页面上 但是其中又几个数据需要进行额外的加工处理 如果不使用过滤器的话 我们要人为的写一个函数 在这个函数中 我们首先要
1、遍历这个数组 找到特定的数据
2、对这个数据进行加工
3、加工完后将这个数据替换原来数组中的数据
4、 把这个数组拿到模板中渲染
5、如果某天我们需要将另外一个数组的数据中的某个值也进行加工 我们又需要写一个新的类似的函数来处理
通过以上的情景 我们发现 用传统的方式来处理加工数据变得非常繁琐 原因就是要处理的数据和处理数据的函数绑的太死了 导致这个处理数据的函数不通用 当然传统方法要想吧这个处理数据的方法拎出来 调用 也是可以的 但是同样面临具体处理那个数据的一个问题
使用了filters过滤器的好处就是 我们将这个处理的过程单独拿出来 并且通过管道符 的这种写法 随意 的在模板中需要被处理的数据位置使用过滤器来处理,大大简化了数据处理的过程
同样是以上场景 :
1、在filters中写好一个处理数据的函数
2、在模板中需要被处理的数据后面加上过滤器即可

Logo

前往低代码交流专区

更多推荐