首先:Svelte 对我来说仍然很新。希望问题不太琐碎。
在一个简单的组件中,我想要使用格式化输入字段的内容进行计算。例如,在输入字段中应显示格式化的欧元金额(1.000),它旁边应显示一个带增值税的金额文本(1.190)。
我已经清楚了如何做到没有格式化。示例如下:
在一个简单的组件中,我想要使用格式化输入字段的内容进行计算。例如,在输入字段中应显示格式化的欧元金额(1.000),它旁边应显示一个带增值税的金额文本(1.190)。
我已经清楚了如何做到没有格式化。示例如下:
export let net;
export let vat;
$: gross = net + (net * vat / 100);
$: grossPretty = gross.toLocaleString('de-DE',{ minimumFractionDigits: 0, maximumFractionDigits: 0 });
使用类似以下的简单标记:
<form>
<label>Net amount</label>
<input type="text" step="any" bind:value={net} placeholder="Net amount">
</form>
<div>
Gros = {grossPretty} €
</div>
在vue中,我使用了一个计算属性。它的getter返回格式化后的字符串,而它的setter则获取格式化后的字符串并保存原始值。
(在data()中我定义了net,在计算属性中我定义了netInput。输入字段使用netInput作为v-model)。
代码如下:
netInput: {
get(){
return this.net.toLocaleString('de-DE',{ minimumFractionDigits: 0, maximumFractionDigits: 0 });
},
set(s){
s = s.replace(/[\D\s._-]+/g, "");
this.net = Number(s);
}
}
我该如何在Svelte中处理它?