Reactive¶
Svelteのリアクティブはプロパティに=で値を代入することで代入後の値でDOMが更新される。あるプロパティの更新にて、別のプロパティ値を再計算したい場合は、letの変わりに"$:"に続けてプロパティ定義をすることで再計算される。
下記の例では、lastnameかfirstnameが更新されるとnameが再計算される。
let lastname = '鈴木';
let firstname = 'イチロー';
$: name = `${lastname} ${firstname}`;
"$:"の後にはプロパティ定義だけでなく、複数行にまたがるステートメントを記述することもできる。
下記例では、countが更新されるとdoubleが再計算、条件によってはcount,doubleが0に初期化される。また、countの更新によってmsgも更新される。
$: {
double = count * 2;
if (double > 10) {
count = 0;
double = 0;
}
}
$: if (count % 2 == 0) {
msg = "偶数";
} else {
msg = "奇数";
}
App.svelte¶
<script>
let lastname = '鈴木';
let firstname = 'イチロー';
$: name = `${lastname} ${firstname}`;
let count = 0;
let double = 0;
let msg = '';
$: {
double = count * 2;
if (double > 10) {
count = 0;
double = 0;
}
}
$: if (count % 2 == 0) {
msg = "偶数";
} else {
msg = "奇数";
}
function countup() {
count = count + 1
}
</script>
<div>
<input placeholder="山田" bind:value={lastname}>
<input placeholder="太郎" bind:value={firstname}>
<div>{name}</div>
<button on:click={countup}>クリック</button>
<div>count:{count}</div>
<div>double:{double}</div>
<div>{count}は{msg}</div>
</div>
<style>
</style>
適用イメージ