宣言レンダリング

13633 ワード
テキストリンク

宣言レンダリング

<script>
	import Hello from './Hello.svelte';
	let name = 'world';
	let age = 85;
</script>

<h1>Hello {name}!</h1>
<h2>{age}</h2>

ワンウェイバインド


データをバインドします.(ex. name, age)
<script>
	let name = 'world';
	let age = 85;
function assign() {
	name = 'Eunji'
	age = 28
}
</script>

<h1>Hello {name}!</h1>
<h2>{age}</h2>
<img src="" alt={name} />
<input type="text" value={name} />
<button on:click={assign}>
	Assign
</button>

双方向バインド


値の前にbind:(bind:)を指定すると、双方向にバインドされます.
<script>
	let name = 'world';
	let age = 85;
function assign() {
	name = 'Eunji'
	age = 28
}
</script>

<h1>Hello {name}!</h1>
<h2>{age}</h2>
<img src="" alt={name} />
<input type="text" bind:value={name} />
<button on:click={assign}>
	Assign
</button>
コードにactive classを与えようとすると、classに3つの演算子を使用できます.
class={age < 85 ? 'active' : ''}
<script>
	import Hello from './Hello.svelte';
	let name = 'world';
	let age = 85;
function assign() {
	name = 'Eunji'
	age = 28
}
</script>

<h1>Hello {name}!</h1>
<h2 class={age < 85 ? 'active' : ''}>{age}</h2>
<img src="" alt={name} />
<input type="text" bind:value={name} />
<button on:click={assign}>
	Assign
</button>


<style>
	h1 {
		color: red;
		font-size: 20px;
	}	
	.active {
		color: blue;
	}
</style>
Assignボタンをクリックすると状態が28になり、アクティブスタイル属性の色値も変わります.

json server
BigOシンボル