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

注意！！

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