我的 Vue 组件是这样的
<template>
<div>
<div class="panel-group"v-for="item in list">
<div class="col-md-8">
<small>
Total: <b>{{ item.total }}</b>
</small>
</div>
</div>
</div>
</template>
<script>
export default {
...
computed: {
list: function() {
return this.$store.state.transaction.list
},
...
}
}
</script>
{{ item.total }}
的结果是
26000000
但我希望格式如下
26.000.000,00
在 jquery 或 javascript 中,我可以这样做
但是,如何在 vue 组件中实现?
更新:我建议使用 @Jess 提供的带有过滤器的解决方案。
我会为此编写方法,然后在需要格式化价格的地方,只需在模板中放入方法并向下传递值即可
methods: {
formatPrice(value) {
let val = (value/1).toFixed(2).replace('.', ',')
return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
}
}
然后在模板中
<template>
<div>
<div class="panel-group"v-for="item in list">
<div class="col-md-8">
<small>
Total: <b>{{ formatPrice(item.total) }}</b>
</small>
</div>
</div>
</div>
</template>
顺便说一句,我没有太在意替换和正则表达式。
公认答案的精确性存在问题。
在这个测试中,round(value, decimals) 函数是有效的。 *与简单的 toFixed 示例不同。