es6模块如何在vue的模板的插值语法中使用？

Question

题目描述

有这样一个需求，后台提供的数据在前台展现的时候需要“格式化”一下，比如后台提供的数据是1230000，那么在前台需要展现为123万。
在模板插值的时候直接{{data}} 这样就直接显示了1230000。因为有多个页面需要处理，于是，创建了一个公共的函数：

// @/utils/index.js
export function formatPlayCount(number) {
  let stringNumber = number.toString();
  let numberLength = stringNumber.length;
  //亿级别
  if (numberLength > 8) {
    return parseInt(number / 100000000) + "亿";
  }
  // 万级别
  else if (numberLength > 4) {
    return parseInt(number / 10000) + "万";
  } else {
    return number;
  }
}

然后在需要使用这个函数的组件页面：(因为插值语法里面只能是变量或者计算属性，所以使用计算属性包裹了一下)

<template>
<div>{{formatPlayCount(originalData)}}</div>
</template>

<script>
import {formatPlayCount} from "@/utils/index.js";
export default {
    computed:{
        formatPlayCount(originalData){
         return  formatPlayCount(originalData);
        }
    }
}
</script>

然后又换两种种写法：

    formatPlayCount() {
      return (originalData) => {
        formatPlayCount(originalData);
      };
    },

formatPlayCount(originalData){
          formatPlayCount(originalData);
        }

但是，要么是报错，要么是不显示数据。这里应该怎么写？

Answer 1

    formatPlayCount() {
      return (playCount) => {
        return formatPlayCount(playCount);
      };
    },

搞掂了，自定义函数前面还是要加个return