처음부터 시작하는 Java
  • Form 입력 바인딩
    2024년 05월 28일 19시 10분 10초에 업로드 된 글입니다.
    작성자: 원2
    728x90
    반응형

    프론트엔드 폼 작업시 폼 입력 엘리먼트의 상태를 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
    댓글