在使用vue-cli脚手架创建的项目中，经常有功能模块会在多个单文件组件中使用的情景。一般情况下，我们会将需要多个文件用到的代码封装到单独的模块文件中。比如后台提供的数据是1230000，需要在前台显示为123万，那么就需要对这个数据做一定的格式化。我们在脚手架项目中创建这样一个文件:

@/utlis/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;
  }
}

然后，在需要调用的组件内引入：

import {formatPlayCount} from "@/utils/index.js"

然后在模板插值内使用:（originalData是原始的后台数据）

<span>{{ formatPlayCount(originalData) }}</span>

你会发现这样不行，因为插值语法只支持变量和计算属性，不支持函数，而且也不支持带入参数。于是，我们用计算属性包装一下：

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

于是这样，就可以在插值语法里面变通的使用公共函数了。