html dom 제어하기

 

if문

if문..! 

{#if 조건}
 조건이 참일때 내용
{:else}
 조건이 false일 때 내용
{/if}

{#if 조건}
 조건이 참일 때
{/if}

{#if 조건1}
 조건1 참일때 내용
{:else if 조건2}
 조건2가 참일 때
{:else}
 모든 조건에 해당되지 않을 때
{/if}

 

dom 제어

다음 사진처럼 dom을 제어해줄 수 있습니다.

해당 사진의 내용은 Log In 버튼을 누르면 true를, log Out 버튼을 누르면 false를 화면에 보여주는 코드입니다.

 

더 나아가서 다음과같이 작성할 수 있겠네요!

<script>
  사진과 같음
</script>

<button on:click={handleLogin}>로그인</button>
<button on:click={handleLogOut}>로그아웃</button>

{#if auth.loggedIn === true}
	<p>로그인 상태입니다.</p>
{:else}
	<p>로그아웃 상태입니다.</p>
{/if}

 

반복 블록 {#each..}

바로 그냥 사용방법

{#each datas as data}
 {data.name}
{/each}

 

중괄호{}안에 #each를 작성하고, 우리가 반복해서 작성할 배열을 작성합니다. (여기서는 datas )

그리고, as를 이용해 순서대로 들어오는 배열의 이름을 설정합니다 (data)

 

그리고 그 데이터의 이름을 뽑아주고있습니다.