什么是管道符
-
例如
{{data | methodsFun}}中的"|"就是管道符 -
也被称作“vue的过滤器”：
过滤器（filter）就是把一些不必要的东西过滤掉,过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，我们也可以理解其为一个纯函数。 -
|左边的是待处理的数据，会作为methodsFun的第一个参数传给该方法。 -
如果想在此基础上传递另外的参数如：
{{data | methodsFun(arg2)}}，该情况下，arg2会作为第二个参数传给methodsFun，例如：methodsFun(data,arg2){ //具体的处理 return '' } -
处理函数
methodsFun的返回值将会展示在界面上。
应用场景
-
当在
<template></template>中需要格式化一些数据的时候可以使用管道符 -
举例：
<template> <div> <span>{{time|timeFormat}}</span> </div> </template><script> export default { data(){ return { obj:{ time:"" } } }, methods:{ timeFormat(time){ return '格式化后的时间' } } } </script> -
上述代码的含义：将
obj.time按照timeFormat中定义的格式进行展示。 -
该方式不会改变
obj.time的值，只是将其作为参数传给方法timeFormat，该方法的返回值将会真正展示在页面上。文章来源：https://www.toymoban.com/news/detail-513837.html
注意！！文章来源地址https://www.toymoban.com/news/detail-513837.html
- 当管道符右侧的处理函数执行有误的情况下导致页面渲染不出来正确的数据！！
到了这里，关于vue-管道符“ | “(竖杠)的作用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
