Binding Svelte：如何将格式化输入字段绑定到属性

首先：苗条对我来说还是新鲜事。我希望这个问题不要太琐碎

在一个简单组件中，我想使用格式化输入字段的内容进行计算。
例如：
在输入字段中，应显示欧元金额（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>

netInput: {
   get(){
      return this.net.toLocaleString('de-DE',{ minimumFractionDigits: 0, maximumFractionDigits: 0 });
   },
   set(s){
      s = s.replace(/[\D\s._-]+/g, "");
      this.net = Number(s);
   }
}

使用如下简单的标记：

    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>

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中处理它？

您可以做一些类似的事情，创建另一个计算变量，存储输入字段中的变形字符串，并在计算中使用，而不是直接输入

export let net；
出口增值税；
$：net_plain=数字（net.replace（/[\D\s.[-]+/g，”）；
美元：毛额=净增值税+（净增值税*增值税/100）；
$：grossPretty=gross.toLocaleString（'de-de'，{minimumFractionDigits:0，maximumFractionDigits:0}）；

---

但是也许可以为变量找到一个更好的名称：）

多亏了Stephane Vanraes，我找到了一个解决方案

它没有vue方法的魅力，但也没关系。首先，我插入了“net_plain”。为了在输入期间格式化输入字段，我为keyup事件添加了一个事件侦听器

<input type="text" step="any" bind:value={net} on:keyup={handleKeyUp} placeholder="Net amount">

但是：如果任何人有使用getter和setter的解决方案，我将非常感谢您的回答