[Vue.js] input 태그 value와 :value 차이

1. value

<input id="inpSize1" type="tel" :placeholder="키" value="originHeight" @change.prevent="$_hValidateHn">

	...

computed: {
	...mapState({
		originHeight(state) {
			return state.originHeight;
		},
	
	...

• value의 경우, 뷰의 input 창 안에 "originHeight" 하드코딩으로 나타남

2. :value

<input id="inpSize1" type="tel" :placeholder="키" :value="originHeight" @change.prevent="$_hValidateHn">

	...

computed: {
	...mapState({
		originHeight(state) {
			return state.originHeight;
		},
	
	...

• :value의 경우 뷰의 input 창 안에 computed 단계에서 불러온 originHeight 값(data)으로 나타남

TIP)

• @change.prevent="$_hValidateHn" @change는 해당 input 태그 내 값이 변경됐을 경우 $_hValidateHn 메소드를 실행시킨다.