【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>