我正在尝试创建一个看起来像带有千位分隔符的美元货币的输入,但是我写的价格不能超过3个数字。
我只希望此输入的显示方式与实际值有所不同,而实际值将用于计算某些内容。
您知道问题出在哪里吗?
这是一个codeandbox链接:
https://codesandbox.io/s/vue-template-s6jo9
这是代码:
<template>
<div id="app">
<img width="25%" src="./assets/logo.png">
<input v-model="fValue">
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
name: "App",
components: {
HelloWorld
},
data() {
return {
value: ""
};
},
computed: {
fValue: {
// getter
get: function() {
if (this.value !== "") {
return this.formatUSD(this.value);
}
},
// setter
set: function(newValue) {
this.value = this.parseUSD(newValue);
}
}
},
methods: {
formatUSD(num) {
return (
"$" +
Number(num)
.toFixed(2)
.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
);
},
parseUSD(text) {
return Number(text.replace("$", "").replace(/,/g, ""));
}
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
答案 0 :(得分:1)
.toFixed(2)
使数字的格式具有2个小数。但是问题是它将光标移到最后一个位置。这就是为什么似乎那里只允许输入3位数字的原因。返回值here(gif)之前,console.log(num)
可以显示实际数字。
您实际上可以更改小数点之前的光标位置,然后在该位置添加更多数字。还有一种方法允许小数点.
(点)作为用户输入。
formatUSD(num) {
return "$" + Number(num).toLocaleString();
},
formatUSD(num) {
return (
"$" +
Number(num)
.toString()
.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
);
},
另一种选择是,如果不是用户输入,则使光标停留在小数点之前。