// 사용자 입력(input)
1. input 태그로 입력 받기
<input @input="month = $event.target.value">
<input v-model="month">
2. 입력값 데이터로 저장하기
export default {
data() {
return {
month: 0
}
}
}
// watch
- input을 받는 데이터의 변경사항을 감지할 수 있다.
export default {
data(){
return {
a : 1
}
},
watch : {
a(){
//a가 변경될 때 실행할 코드
}
}
}
- a() 안에 매개변수를 사용할 수 있다.
~ a(p) 또는 a(p1, p2)
> p1: 변경될 값, p2: 변경 전 값
// computed
- data속성 값의 변화를 감지하여 특정 변화를 수행한다.
- 변하기 이전 값을 가지고 있다가(캐싱하고 있다가) 필요 시 반환한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.warning {
color: red;
}
</style>
</head>
<body>
<div id="app">
<p v-bind:class="errorTextColor">Hello</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
isError: false
},
computed: {
errorTextColor: function() {
return this.isError ? 'warning' : null;
}
}
})
</script>
</body>
</html>// watch vs computed
- watch는 상대적으로 시간이 더 많이 소요되는 비동기 처리에 적합 > 데이터 요청과 같은 것들
- computed는 내장 API를 활용한 간단한 연산에 적합
'클라이언트 > Vue.js' 카테고리의 다른 글
| [뷰(Vue)] Router(라우터) (0) | 2023.08.02 |
|---|---|
| [뷰(Vue)] 애니메이션 / lifecycle hook (0) | 2023.07.31 |
| [뷰(Vue)] export, import / 컴포넌트 (0) | 2023.07.31 |
| [뷰(Vue)] 이벤트 핸들러, 메서드(Method) (0) | 2023.07.30 |
| [뷰(Vue)] 데이터 바인딩, 반복문, 조건문 (0) | 2023.07.30 |
