在vue中的html标签{{}}内可以调用函数方法

今天领导提个需求，要求在金额上强制保留两位小数，本想着后台直接返回数据时，带着两位的小数，前端只是做个显示作用，后台说保留了小数但在传输过程中去掉了，可能他们做了格式转化。没办法了只能又是我们前端操作了，牵扯价钱的太多了，很多时候又有for 循环，怎么办呢？

思路：{{}}里面的是一个表达式，可不可以是个函数呢？经测试是可以的，具体实现方法如下：

1. 写一个公共的强制保留两位小数的js方法

function toDecimal2 (x) {
  var f = parseFloat(x)
  if (isNaN(f)) {
    return false
  }
  var f = Math.round(x * 100) / 100
  var s = f.toString()
  var rs = s.indexOf('.')
  if (rs < 0) {
    rs = s.length
    s += '.'
  }
  while (s.length <= rs + 2) {
    s += '0'
  }
  return s
}

export default {
 toDecimal2
}

在main.js中引用：

import newPrice  from './config/api'

引用：

 
¥{{newPrice(item.price)}}

效果：