v-model 에 대해

v-model은 input, select, textarea에서 사용할 수 있다.

 input 이벤트: input type="text", textarea

change 이벤트 : input type="checkbox", input type="radio", select 

 

 

default modifiers

v.model.lazy- input 요소에서 포커스가 빠지면 data가 업데이트 된다.

v.model.number - input에 입력된 값을 숫자형으로 바꿔준다.

v.model.trim - js의 string의 trim 메서드와 같다. 입력값 앞뒤 공백을 제거해준다.

 

checkbox에서의 true-value, false-value

checkbox의 v-model로 바인딩한 data가 Boolean 형태이기 떄문에, 이 속성을 이용해 직접 true,false일 때의 값을 정의할 수 있다.

<template>
  <label for="test">
    <input
      type="checkbox"
      v-model="isChecked"
      id="test"
      true-value="good"
      false-value="bad"
    />
    {{ isChecked }}
  </label>
</template>
<script>
export default {
  data() {
    return {
      isChecked: "",
    };
  },
};
</script>

실행결과