[Svelte-demo (1)] 선언적 렌더링/조건문과 반복문

조건문 사용

<script>
	let name = 'Change-Word';
	let toggle = false
</script>
<button on:click={() => {toggle = !toggle}}>
	{name}
</button>
{#if toggle}
<h1>Hello {name}!</h1>
{:else}
<h1>
	No name!
</h1>
{/if}

 

 

반복문 사용

<script>
	let name = 'Fruits';
	let fruits = ['Apple', 'Banana', 'Cherry', 'Orange', 'Mango']
	function deleteFruit() {
		fruits = fruits.slice(1)
	}
</script>

<h1>Hello {name}!</h1>
<ul>
	{#each fruits as item}
		<li>{item}</li>
	{/each}
</ul>
<button on:click={deleteFruit}>
	Delete Fruit
</button>