title: Svelte: How to bind a formatted input field to a property
body: <p>First of all: Svelte is still new to me. I hope the question is not too trivial. </p>
  
  <p>Within a simple component I want to use the content of a <strong>formatted input field</strong> for a calculation.<br>
  For example: <br>
  In the input field a Euro amount should be displayed formatted (1.000).
  Next to it a text with the amount plus VAT should be displayed (1.190).</p>
  
  <p>How I do this <strong>without formatting</strong> is clear to me. The example looks like this:</p>
  
  <pre><code>    export let net;
      export let vat;
  
      $: gross = net + (net * vat / 100);
      $: grossPretty = gross.toLocaleString('de-DE',{ minimumFractionDigits: 0, maximumFractionDigits: 0 });
  </code></pre>
  
  <p>with a simple markup like this:</p>
  
  <pre><code>    &lt;form&gt;
        &lt;label&gt;Net amount&lt;/label&gt;
        &lt;input type="text" step="any" bind:value={net} placeholder="Net amount"&gt;
      &lt;/form&gt;
      &lt;div&gt;
          Gros = {grossPretty} €
      &lt;/div&gt;
  
  </code></pre>
  
  <p>In <strong>vue</strong> i used a computed property. Its <strong>getter</strong> delivers the formatted string and its <strong>setter</strong> takes the formatted string and saves the raw value.
  <em>(In data() I define net, in the computed properties i define netInput. The input field uses netInput as v-model)</em>.<br>
  It looks like this:</p>
  
  <pre><code>netInput: {
     get(){
        return this.net.toLocaleString('de-DE',{ minimumFractionDigits: 0, maximumFractionDigits: 0 });
     },
     set(s){
        s = s.replace(/[\D\s._-]+/g, "");
        this.net = Number(s);
     }
  }
  </code></pre>
  
  <p><strong>How can I handle it in svelte?</strong></p>