vue-管道符“ | “(竖杠)的作用

什么是管道符

例如 {{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，该方法的返回值将会真正展示在页面上。

注意！！

当管道符右侧的处理函数执行有误的情况下导致页面渲染不出来正确的数据！！

vue-管道符“ | “(竖杠)的作用相关推荐

js中单竖杠 | 的作用
之前有看过关于单竖杠 "|" 的介绍,但由于自己用得少,所以常常忘记,写下来记录一下. 在做数的处理时,| 的作用是去除小数点取整,所以在处理正数是相当去 Math.floo ...
oracle 两个竖杠的作用,Oracle 关于concat与双竖线用法的补充
--只能连接2个字符串 select concat('nod',' chen is ') from dual; --连接2个列名 select concat(name,ip2) from vm_inf ...
js运算符单竖杠“|”的用法和作用及js数据处理
js运算符单竖杠"|"的作用很多朋友都对双竖杠"||",了如指掌,因为这个经常用到.但是大家知道单竖杠吗?今天有个网友QQ问我,我的 javascript实用 ...
js运算符单竖杠“|”的用法
js运算符单竖杠"|"的作用很多朋友都对双竖杠"||",了如指掌,因为这个经常用到.但是大家知道单竖杠吗?今天有个网友QQ问我,我的 javascript实用 ...
前端开发js运算符单竖杠“|”的用法和作用及js数据处理
很多朋友都对双竖杠"||",了如指掌,因为这个经常用到.但是大家知道单竖杠吗?今天有个网友QQ问我,我的 javascript实用技巧,js小知识 , 这篇文章里面,js整数的操作 ...
js运算符单竖杠“|”与“||”的用法和作用介绍
之前文章,在js整数操作的时候,相当于去除小数点,parseInt.在正数的时候相当于Math.floor(),负数的时候相当于Math.ceil() 注: 1. Math.ceil()用作向上取整. ...
一个竖杠在python中代表什么_详解js运算符单竖杠“|”与“||”的用法和作用介绍...
在js开发应用中我们通常会碰到"|"与"||"了,那么在运算中"|"与"||"是什么意思呢? 在js整数操作的时候,相当 ...
VIM 用正则表达式,非贪婪匹配,匹配竖杠,竖线, 匹配中文,倒数第二列, 匹配任意一个字符 :...
VIM 用正则表达式批量替换文本,多行删除,复制,移动在VIM中用正则表达式批量替换文本,多行删除,复制,移动 :n1,n2 m n3 移动n1-n2行(包括n1,n2)到n3行之下: ...
js 逻辑空分配双问号语法、双竖杠语法与可选链语法
可选链的语法允许开发者访问嵌套得更深的对象属性,而不用担心属性是否真的存在.也就是说,如果可选链在挖掘过程遇到了null或undefined的值,就会通过短路(short-circuit)计算,返回u ...

vue-管道符“ | “(竖杠)的作用

什么是管道符

应用场景

vue-管道符“ | “(竖杠)的作用相关推荐

最新文章

热门文章