Vue js 2 - v-model

v-model 은 양방향 바인딩입니다.

 

사용자가 입력하는 값을 변수에 바로 바인딩 해서 실시간으로 보여줄 수 있습니다.

 

먼저 v-model을 사용하지 않는 방식을 먼저 보겠습니다.

 

 

v-model을 사용하지 않을 경우

<template>
  <div id="app">
      <input type="text" :value="text" @keyup="updateText">
      <br>
      {{ text }}
  </div>
</template>

<script>
export default {
    data(){
      return{
        text : ''
      }
    },
    methods : {
      updateText(e){
        //기본적으로  event를 인자로 받아서 쓸 수 있음.
        this.text = e.target.value;
      }
    }
}
</script>

 

일반적으로 이벤트에 사용자가 입력한 값을 받아서 메소드를 호출하여 data에 바인딩 시켜주는 방식입니다.

 

사용자가 입력할때마다 이벤트를 발생시키는 keyup 이벤트에 updateText라는 메소드를 사용하여 

 

data에 있는 text의 값을 변경 시켜줍니다.

 

이것을 v-model을 사용하면 간단하게 바꿀 수 있습니다.

 

v-model을 사용하는 경우

<template>
  <div id="app">
      <input type="text" v-model="text">
      <br>
      {{ text }}
  </div>
</template>

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

 

이렇게 v-model에 data에 들어있는 text 변수를 사용하면 사용자의 입력 값이 바로바로 바인딩 됩니다.