Javascript VueJS-向输入添加千位分隔符
我正在尝试创建一个输入,它看起来像是一个有千个分隔符的美元货币,但我写的价格不能超过3个数字 我只是想让这个输入显示的和我用来计算的实际值不同 你知道问题出在哪里吗 下面是一个codesandbox链接: 代码如下:Javascript VueJS-向输入添加千位分隔符,javascript,vue.js,Javascript,Vue.js,我正在尝试创建一个输入,它看起来像是一个有千个分隔符的美元货币,但我写的价格不能超过3个数字 我只是想让这个输入显示的和我用来计算的实际值不同 你知道问题出在哪里吗 下面是一个codesandbox链接: 代码如下: <template> <div id="app"> <img width="25%" src="./assets/logo.png"> <input v-mo
<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>
从“/components/HelloWorld”导入HelloWorld;
导出默认值{
名称:“应用程序”,
组成部分:{
你好世界
},
数据(){
返回{
值:“”
};
},
计算:{
价值:{
//吸气剂
get:function(){
如果(this.value!==“”){
返回此.formatUSD(此.value);
}
},
//塞特
set:函数(newValue){
this.value=this.parseUSD(新值);
}
}
},
方法:{
美元(个){
返回(
"$" +
数字(num)
.toFixed(2)
.replace(/(\d)(?=(\d{3})+(?!\d))/g,“$1”)
);
},
美元(文本){
返回编号(text.replace($,“”)。replace(/,/g,“”);
}
}
};
#应用程序{
字体系列:“Avenir”,Helvetica,Arial,无衬线;
-webkit字体平滑:抗锯齿;
-moz osx字体平滑:灰度;
文本对齐:居中;
颜色:#2c3e50;
边缘顶部:60像素;
}
.toFixed(2)
使数字的格式有两个小数。但问题是它将光标放在最后一个位置。这就是为什么它看起来只有3位数的数字。如果在返回值之前console.log(num)
,您可以看到实际的数字
实际上,您可以在小数点之前更改光标位置,然后在那里添加更多数字。还有另一种方法允许用户输入十进制
(点)
另一个选项是,如果不是通过用户输入,则将光标保持在小数点之前。您遇到了什么错误或问题experiencing@Fritzdultimate请检查代码沙盒,它只允许4个字符长的数字,我不能再写了。
formatUSD(num) {
return "$" + Number(num).toLocaleString();
},
formatUSD(num) {
return (
"$" +
Number(num)
.toString()
.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
);
},