mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
21 lines
969 B
21 lines
969 B
6 years ago
|
---
|
||
|
title: Declarations
|
||
|
---
|
||
|
|
||
2 years ago
|
Svelte's reactivity not only keeps the DOM in sync with your application's variables as shown in the previous section, it can also keep variables in sync with each other using reactive declarations. They look like this:
|
||
6 years ago
|
|
||
|
```js
|
||
|
let count = 0;
|
||
|
$: doubled = count * 2;
|
||
|
```
|
||
|
|
||
5 years ago
|
> Don't worry if this looks a little alien. It's [valid](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label) (if unconventional) JavaScript, which Svelte interprets to mean 're-run this code whenever any of the referenced values change'. Once you get used to it, there's no going back.
|
||
6 years ago
|
|
||
|
Let's use `doubled` in our markup:
|
||
|
|
||
1 year ago
|
```svelte
|
||
6 years ago
|
<p>{count} doubled is {doubled}</p>
|
||
|
```
|
||
|
|
||
1 year ago
|
Of course, you could just write `{count * 2}` in the markup instead — you don't have to use reactive values. Reactive values become particularly valuable when you need to reference them multiple times, or you have values that depend on _other_ reactive values.
|