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

时间:2022-06-18
本文章向大家介绍在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'

引用：

 <div class="price">¥{{newPrice(item.price)}}</div>

效果：

随机文章
Javascript知识点必读
最近更新