我有以下有效的 Aurelia 代码:
total = 9000;
<div class="row pt-2">
<div class="col-10 text-right">Amount is</div>
<div class="col-2 text-right">${total}</div>
</div>
我想做的是使用 Numeral.js HTML 中的库来格式化从 9000 到 9000.00 的总变量。这是我尝试过的:
total = 9000;
<div class="row pt-2">
<div class="col-10 text-right">Amount is</div>
<div class="col-2 text-right">${numeral(${total}).format('0.00')}</div>
</div>
以及以下内容:
total = 9000;
<div class="row pt-2">
<div class="col-10 text-right">Amount is</div>
<div class="col-2 text-right">numeral(${total}).format('0.00')</div>
</div>
但不幸的是,没有一个有效。我尝试在 TypeScript 中使用 Numeral 库,它工作正常。不过我在 HTML 上需要这个。 我的 react 非常灵敏,所以请随时提出任何问题。
最佳答案
使用值转换器包装对 numeral 的调用。
这就是您的值(value)转换器的样子。不过,您必须将正确的导入语句添加到文件中。
import numeral from 'numeral';
export class CurrencyFormatValueConverter {
toView(value, format = '0.00') {
return numeral(value).format(format);
}
}
然后您需要使用 require 元素将值转换器加载到您的 View 中。
<require from="./path/to/file'></require>
然后你就可以在你的 View 中使用它了。
<div class="row pt-2">
<div class="col-10 text-right">Amount is</div>
<div class="col-2 text-right">${total | numeral }</div>
</div>
或者您可以传入自定义格式作为参数来覆盖默认值:
<div class="row pt-2">
<div class="col-10 text-right">Amount is</div>
<div class="col-2 text-right">${total | numeral:'($0,0.00)' }</div>
</div>
顺便说一下,您应该看一下我们的文档,因为它实际上包含了这个精确值转换器作为其示例之一:https://aurelia.io/docs/binding/value-converters#value-converters
关于html - 在 Aurelia 中使用 HTML 中的 Numeral.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53657073/