<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:" 명시해주면 양방향으로 바인딩 된다.
<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에 줄 수 있다.
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로 상태가 변화면서 active 스타일 속성인 컬러 값도 변하게 된다.