v-model / custom event를 조금 더 간략하게 !

가운데 input 박스에 숫자를 입력하면,

밑에 @ 개월 선택함과  가격이 변동 되도록 할 생각이다.

 

 

 

먼저 month 변수를 선언했다. 초기값은 1

input 태그안에 @input 이라는걸 vue 문법을 선언했다.

@input 은 입력을 할 때마다 실행.

( @change 는 커서에 있다가, 다른 곳으로 이동할 때 실행 )

 

target.value는 사용자가 입력했던 값을 반환

 

그래서 month = $event.target.value 를 사용하면, 사용자가 입력한 값을

month 라는 변수에 담게 된다.

 

 

 

가격을 출력하는 부분이다.

month는 데이터 바인딩 하였고.

 

이후에도 price 가격에 * 바로 곱해주면 된다.

문자열이니 곱셈까지는 가능하지만, 합산을 하게되는 경우는 문자열 합산으로 되니 반드시 주의해야 한다.

 

 

---

이 방법 보다 더 쉽게 하는 방법이 있다.

v-model

이 한줄 이면 된다.

이전에 입력했던 값이 month에 담기 위함이었다면 v-model 하나면 된다.

심지어 자료형을 숫자형으로 변환할 수 있다.

v-model.number = "month" 이런식으로 사용하면 된다.

 

v-model 은 select, textarea 에도 다양하게 사용가능하나,

v-model에 사용되는 변수의 초기값에 민감하다.

 

숫자를 입력하면 숫자 자료형이 되고.

문자를 입력하면 문자 자료형이 된다.

 

 

정상적으로 출력되는 걸 볼 수 있다.