【VUE】过滤器的使用，管道符号' | '

1.vue过滤器的使用，常用于多文本数据的格式化

<!-- 在双花括号中 -->
{{ message | capitalize }}
{{ 数据 | 过滤器 }}

• 过滤器函数接收表达式的值 (之前的操作链的结果) 作为第一个参数

• 过滤器可以传递参数

{{ message | filter('type1', type2) }}

message将作为第一个参数传递给过滤器，'type1', type2，依次作为第二个 第三个参数

• 过滤器可以串联

{{ message | filterA | filterB }}

message的返回传入filterA， 处理结果作为参数继续传入filterB 

2.vue实例

• 金额的格式化：保留两位0

 let formatMoney = (value, type) => {
    let moneyStr = '';
    if (isNan（Number（value））) {
        return false
    }
    if (value) {
      value = parseFloat(value).toFixed(2).split('.');
    } else {
      value = ['0', '00']
    }
    if (type === 'integer') {
      moneyStr = '¥ ' + value[0];
   } else if (type === 'float') {
     moneyStr = value[1];
   } else if (type === 'noIcon') {
     moneyStr = value[0] + '.' + value[1];
   } else {
     moneyStr = '¥ ' + value[0] + '.' + value[1];
   }
   return moneyStr;
 }

• 数据处理，有数据取数据，没有‘--‘展示

let filter = (value) => {
  let flag;
  flag = !value ? '--' : value
  return flag
}

• 从js文件中将两个过滤器暴露出去

export default {
  filter,
  formatMoney
}

• 在main.js中引入：

import filter from './filters/index';

• 使用：

　　获取到数据unitmount，作为参数传给filter ----> 有值就使用原来的值，没有的话展示为空  ----->  处理后的数据继续格式化，保留两位0

            <el-table-column
              prop="unitamount"
              min-width="150px"
              label="保险金额（元）"
              align="right">
              <template slot-scope="scope">
                <span>{{ scope.row.unitamount | filter  | formatMoney('noIcon') }}</span>
              </template>
            </el-table-column>