6. 폼(form) 다루기 (v-model)

v-model은 템플릿과 데이터를 양방향으로 바인딩하는 기능입니다. 사용자의 입력에 따라 데이터가 바뀌고 데이터가 수정되면 템플릿의 내용이 업데이트 되는 것 입니다. 그래서 v-model을 활용하면 사용자의 입력을 받는 UI를 쉽게 해결할 수 있습니다.

 

<template>
  <div>
    <input type="text" v-model="name">
    {{name}}
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      name: ''
    }
  }
};
</script>

기본적인 사용법은 위의 코드와 같습니다. input의 입력된 값이 name데이터를 변화시키고 입력된 값은 화면에서 바로 볼 수 있습니다. 체크박스, 라디오 박스등에도 활용할 수 있습니다.

 

단일체크박스와 라디오박스 경우 true/false가 데이터에 바인딩되고, 여러개의 체크박스라면 선택된 체크박스의 value가 데이터에 리스트로 바인딩 됩니다.