0 Tage Serie
javascript / beginner
Snippet

Berechnen abgeleiteter Werte mit reaktiven Deklarationen

Das Label $: erstellt eine reaktive Deklaration, die sich automatisch neu berechnet, sobald sich eine der referenzierten Variablen ändert – ein idiomatisches Muster für berechnete Zustände.

snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
<script>
let basePrice = 100;
let taxRate = 0.19;
$: taxAmount = basePrice * taxRate;
$: grandTotal = basePrice + taxAmount;
</script>
<button on:click={() => basePrice += 20}>Increase Price</button>
<p>Total: €{grandTotal.toFixed(2)}</p>
svelte
Erklärung
1
$: taxAmount = basePrice * taxRate;
Berechnet die Steuer automatisch neu, wenn sich basePrice oder taxRate ändert.
2
$: grandTotal = basePrice + taxAmount;
Berechnet die Gesamtsumme dynamisch basierend auf den anderen reaktiven Werten.