[Vue.js] Vue Form 입력 바인딩(Form Input Bindings)

Form 입력 바인딩(Form Input Bindings)

 

폼을 처리할 때, 값 바인딩을 수동으로 연결하고 이벤트 리스너를 변경하는 것을

v-model 디렉티브를 사용하여 단순화 할 수 있습니다.

<input
  :value="text"
  @input="event => text = event.target.value">
  
 <!-- v-model을 사용하여 훨씬 간편 --> 
 <input v-model="text">

또한 v-model은 <textarea> 및 <select> 요소에도 사용가능하며,
<input type="checkbox">과 <input type="radio"> 경우, checked 속성과 change 이벤트를 사용.
<select>는 value를 속성으로 사용하고 change를 이벤트로 사용.

 

# 텍스트 (Text)

<script>
    export default{
      data(){
        return{
          message:''
        }
      }
    }
</script>

<template>
  <h2>텍스트</h2>
  <!-- <input type="text" :value="message" @input="event=>message=event.target.value"> -->
  <!-- 위 코드 단축 -->
  <input v-model="message">
  <p>메세지 :{{ message }}</p>
</template>

 

# 여러 줄 텍스트 (Multiline text)

<textarea> 내부에 이중 중괄호 문법은 작동하지 않으므로 v-model을 사용해야 합니다.

<script>
    export default{
      data(){
        return{
          multipleMsg:''
        }
      }
    }
</script>

<h2>여러 줄 텍스트</h2>
<span>여러 줄 메세지:</span>
<p style="white-space: pre-line;">{{ multipleMsg }}</p>
<textarea v-model="multipleMsg" placeholder="여러 줄을 추가해보세요"></textarea>

 

# 체크박스 (Checkbox)

<script>
  export default{
   data(){
     return{
        checked:true,
        checkedNames: []
     }
   }
 }
</script>

<h2>체크박스</h2>
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>

<!-- 기존 값을 지우고 자동으로 true 만 출력 -->
<div>체크된 이름: {{ checkedNames }}</div>

<input type="checkbox" id="jack" value="젝" v-model="checkedNames">
<label for="jack">젝</label>

<input type="checkbox" id="john" value="존" v-model="checkedNames">
<label for="john">존</label>

<input type="checkbox" id="mike" value="마이크" v-model="checkedNames">
<label for="mike">마이크</label>

# 라디오 (Radio)

<script>
  export default{
   data(){
     return{
       picked :'하나',
     }
   }
 }
</script>

<h2>라디오</h2>
<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>

 

 

# 셀렉트 (Select)

<script>
  export default{
   data(){
     return{
       selected :''
     }
   }
 }
</script>

<h2>셀렉트</h2>
    <div>선택됨: {{ selected }}</div>

    <select v-model="selected">
<!-- vue에서 자동으로 value 넣어줌(대신, 텍스트와 value가 일치할 때) -->
      <option disabled value="">다음 중 하나를 선택하세요</option>
      <option>가</option>
      <option>나</option>
      <option>다</option>
    </select>

 

# 다중 셀렉트 (Multiple Select)

<script>
    export default{
      data(){
        return{
            selected: '1',
        options: [
          { text: '하나', value: '1' },
          { text: '둘', value: '2' },
          { text: '셋', value: '3' }
        ]	    
        }
      }
    }
</script>

<h2>셀렉트</h2>
<div>선택됨: {{ selected }}</div>

<select v-model="selected">
  <option v-for="option in options" :value="option.value" :key="option">
    {{ option.text }}
  </option>
</select>

<div>선택됨: {{ selected }}</div>