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>
'프론트엔드 > vue' 카테고리의 다른 글
vue에서 이벤트 버스 바인딩이 늦는 오류 해결 (0) | 2023.06.26 |
---|---|
vue에서 this에 대해 (0) | 2023.06.20 |
v-slot (0) | 2023.05.10 |
vue best practice (0) | 2023.05.08 |
data 초기값을 computed로 할 수 없는 이유 (0) | 2023.04.14 |