[Svelte] 스벨트 6장 Bindings


[Svelte] 스벨트 6장 Bindings

Input 바인딩 # 일반적으로 Svelte의 데이터 흐름은 하향식입니다. 상위 구성 요소는 하위 구성 요소에 props를 설정할 수 있고 구성 요소는 요소에 속성을 설정할 수 있지만 그 반대는 아닙니다. 아래와 같이 "bind:value" 지시문을 사용할 수 있습니다. <input bind:value={name}> ※ 즉, name 값을 변경하면 입력 값이 업데이트될 뿐만 아니라 입력 값이 변경되면 이름도 업데이트됩니다. "Vue.js"의 "v-model"과 동일합니다. <script> let name = 'world'; </script> <input bind:value={name}> <h1>Hello {name}!</h1> Input 타입 (숫자, 범위) # DOM에서 모든 것은 "문자열(String)"입니다. 숫자 입력"(type='number' 및 type='range')"을 처리할 때는 도움이 되지 않습니다. 이는 사용하기 전에 "input.value"를 강제 변환해야 한다...


#bindings #svelte #바인딩 #스벨트

원문링크 : [Svelte] 스벨트 6장 Bindings