- Form 입력 바인딩2024년 05월 28일 19시 10분 10초에 업로드 된 글입니다.작성자: 원2728x90반응형
프론트엔드 폼 작업시 폼 입력 엘리먼트의 상태를 js 상태와 동기화해야 하는 경우가 많음
<input :value="text" @input="event => text = event.target.value"> //단순화 <input v-model="text">
* v-model 은 모든 폼 엘리먼트에서 감지되는 초기 value , checked 또는 select 속성 값을 무시
항상 현재 바인딩된 js 상태를 유효값으로 취급, reactivity API를 사용하여 초기 값 선언해야함
기본 사용법
텍스트
<p>메세지: {{ message }}</p> <input v-model="message" placeholder="메세지 입력하기" />
* 만약 IME 구성 (한국어 일본어 중국어)가 안된다면 v-model 대신 input 이벤트리스너와 value 바인딩을 사용해서 기능구현....
여러 줄 텍스트
<span>여러 줄 메세지:</span> <p style="white-space: pre-line;">{{ message }}</p> <textarea v-model="message" placeholder="여러 줄을 추가해보세요"></textarea>
<textarea> 내부에 이중 중괄호 문법은 작동하지 않으므로 v-model을 사용
<!-- 잘못된 사례 --> <textarea>{{ text }}</textarea> <!-- 올바른 사례 --> <textarea v-model="text"></textarea>
체크박스
불리언 값 사용
<input type="checkbox" id="checkbox" v-model="checked" /> <label for="checkbox">{{ checked }}</label>
배열 또는 Set에 여러 개의 체크박스 값을 바인딩 가능
<script setup> import { ref } from 'vue' const checkedNames = ref([]) </script> <template> <div>체크된 이름: {{ checkedNames }}</div> <input type="checkbox" id="demo-jack" value="젝" v-model="checkedNames"> <label for="demo-jack">젝</label> <input type="checkbox" id="demo-john" value="존" v-model="checkedNames"> <label for="demo-john">존</label> <input type="checkbox" id="demo-mike" value="마이크" v-model="checkedNames"> <label for="demo-mike">마이크</label> </template>
- 이 경우 checkedNames 배열은 항상 현재 체크된 순서대로 값을 포함
라디오
<script setup> import { ref } from 'vue' const picked = ref('One') </script> <template> <div>선택한 것: {{ picked }}</div> <input type="radio" id="one" value="하나" v-model="picked" /> <label for="one">하나</label> <input type="radio" id="two" value="둘" v-model="picked" /> <label for="two">둘</label> </template>
셀렉트
- v-model 표현식의 초기 값이 옵션과 일치하지 않으면 select 엘리먼트가 선택되지 않은 상태로 렌더링
아래 예시처럼 비활성화된 옵션에 빈 값을 제공하는것이 좋음
<script setup> import { ref } from 'vue' const selected = ref('') </script> <template> <div>선택됨: {{ selected }}</div> <select v-model="selected"> <option disabled value="">다음 중 하나를 선택하세요</option> <option>가</option> <option>나</option> <option>다</option> </select> </template>
다중 선택 (배열로 바인딩 됨)
<script setup> import { ref } from 'vue' const selected = ref([]) </script> <template> <div>선택됨: {{ multiSelected }}</div> <select v-model="multiSelected" multiple> <option>가</option> <option>나</option> <option>다</option> </select> </template> <style> select[multiple] { width: 100px; } </style>
셀렉트 옵션은 v-for 로 동적으로 렌더링 가능
<script setup> import { ref } from 'vue' const selected = ref('1') const options = ref([ { text: '하나', value: '1' }, { text: '둘', value: '2' }, { text: '셋', value: '3' } ]) </script> <template> <select v-model="selected"> <option v-for="option in options" :value="option.value"> {{ option.text }} </option> </select> <div>선택됨: {{ selected }}</div> </template>
값 바인딩 하기
라디오, 체크박스 및 셀렉트 옵션의 경우 v-model 에 바인딩된 값은 일반적으로 정적 문자열
<!-- `picked`는 선택 시 문자열 "가"입니다. --> <input type="radio" v-model="picked" value="가" /> <!-- `toggle`은 true 또는 false입니다. --> <input type="checkbox" v-model="toggle" /> <!-- `selected`는 첫 번째 옵션이 선택될 때 문자열 "한글"입니다. --> <select v-model="selected"> <option value="한글">한글</option> </select>
동적 바인딩 (v-model)
체크박스
<input type="checkbox" v-model="toggle" true-value="네" false-value="아니오" /> // v-bind (:) 를 사용하여 동적인 값을 바인딩 하는 방법 <input type="checkbox" v-model="toggle" :true-value="dynamicTrueValue" :false-value="dynamicFalseValue" />
** 브라우저는 폼 제출 시 체크되지 않은 상자는 포함하지 않기 때문에, 무조건 둘 중 하나가 체크 되어야한다면
라디오를 구현해야한다.
라디오
<input type="radio" v-model="pick" :value="first" /> <input type="radio" v-model="pick" :value="second" />
셀렉트 옵션
<select v-model="selected"> <!-- 인라인 객체 리터럴 --> <option :value="{ number: 123 }">123</option> </select>
위의 옵션이 선택되면 selected 는 number:123 객체 값으로 설정된다.
수식어
.lazy
기본적으로 v-model 은 각 input 이벤트 이후 데이터와 입력을 동기화 (IME 구성 제외 : 한중일 언어)
대신 change 이벤트 이후에 동기화하기 위해 .lazy 수식어 추가
<!-- "input" 대신 "change" 이벤트 후에 동기화됨 --> <input v-model.lazy="msg" />
.number
<input v-model.number="age" />
사용자 입력이 자동으로 숫자 유형으로 변환, but parseFloat() 으로 파싱할 수 없으면 원래 값 사용
인풋에 type="number" 가 있으면 .munber 자동 적용
.trim
*trim 문자열 좌우에서 공백을 제거하는 함수
<input v-model.trim="msg" />
728x90반응형'JS F- > Vue' 카테고리의 다른 글
템플릿 참조 (0) 2024.05.29 감시자 (0) 2024.05.29 생명 주기 훅 (0) 2024.05.28 이벤트 핸들링 (0) 2024.05.28 리스트 렌더링 (0) 2024.05.28 조건부 렌더링 (0) 2024.05.28 다음글이 없습니다.이전글이 없습니다.댓글