[Vue.js] input 입력 핸들링 v-model, 체크박스,radio, select

● v-model 사용법

 

 - v-model 디렉티브 값에 사용자입력과 동기화할 데이터를 지정함.

 

input 값과 message속성을 바인딩 ▼ input의 값을 변경하면, 동기화되면서 message 문자 변경됨

 

<div id="app" >
   <input v-model="message">
   <p>{{ message }}</p>
</div>

 

 

var app = new Vue({ 
    el: '#app', 
    data: {
        message: 'Hello !'
    }
})

 

 

 

 

 

- 체크박스

 하나의 요소를 선택하는 체크박스는 기본적으로 데이터를 boolean 으로 다룸

 -> 체크 상태에 따라 요소에 값을 설정하고 싶은 경우에는 true-value, false-value 라는 특별한 속성을 사용함

 

<div id="app" >
   <label>
    <input type="checkbox" v-model="val"> {{ val }}
   </label>
</div>

 

var app = new Vue({ 
    el: '#app', 
    data: {
        val: true
    }
})

 

 

실제 렌더링 ▼

<input type="checkbox" v-model="val" true-value="yes" false-value="no">

 

 

 

여러 개의 요소를 선택하는 체크 박스는 배열로 다룸

v-model에 모두 같은 배열 데이터를 저장, 각각의 요소에 value속성을 설정하는 형태로 사용한다. 

<div id="app" >
   <label><input type="checkbox" v-model="val" value="A">A</label>
   <label><input type="checkbox" v-model="val" value="B">B</label>
   <label><input type="checkbox" v-model="val" value="C">C</label>
   <p>{{ val }}</p>
</div>

 

var app = new Vue({ 
    el: '#app', 
    data: {
        val: [] //배열
    }
})

 

체크된 체크 박스 값은 val 속성에 저장됨

 

 

 

- 라디오 버튼

: 라디오 버튼은 기본적으로 데이터를 문자열로 다룸

 

<div id="app" >
   <label><input type="radio" v-model="val" value="a">A</label>
   <label><input type="radio" v-model="val" value="b">B</label>
   <label><input type="radio" v-model="val" value="c">C</label>
   <p>{{ val }}</p>
</div>

 

var app = new Vue({ 
    el: '#app', 
    data: {
        val: '' //문자열
    }
})

 

-select 박스 

: select 박스는 하나를 선택할 수도, 여러개를 선택할 수도 있음 

 

 하나의 요소를 선택하는 select 박스는 기본적으로 데이터를 문자열로 다룸. 

<div id="app" >
   <select v-model="val">
    <option disabled="disabled">선택해주세요</option>
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
   </select>
   {{ val }}
</div>

 

var app = new Vue({ 
    el: '#app', 
    data: {
        val: '' //문자열
    }
})

 

 

 

 

 

 

여러 요소를 선택하는 select 박스는 데이터를 배열로 다룸

<div id="app" >
   <select v-model="val" multiple>
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
   </select>
   <p>{{ val }}</p>
</div>

 

var app = new Vue({ 
    el: '#app', 
    data: {
        val: [] //배열
    }
})