Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- jQuery
- 인출수수료
- 특약
- 가입
- 웹개발
- 급성심근경색증
- 자바스크립트
- 교보
- Java
- 변환
- 보험료
- 보험
- 문자열
- 파이썬
- javascript
- Vue.js
- 수수료
- 프론트엔드
- 중도인출
- 프로그래밍
- 코딩
- 사망
- 심장질환
- 교보생명
- 추가납입
- 뇌출혈
- 리스트
- 납입
- python
- PythonProgramming
Archives
- Today
- Total
SeouliteLab
[Vue.js] Vue 감시자(watch) 이해와 활용하기 본문
감시자(watch)란?
Vue.js에서 감시자(watch)는 데이터의 변화를 감지하고, 변화에 따라 특정 동작을 수행하는 기능입니다. 특정 데이터를 감시하여 데이터가 변경될 때마다 특정 동작을 수행할 수 있습니다.
예제
아래 예제에서는 사용자의 입력값을 감시하여 입력값이 변경될 때마다 해당 값을 대문자로 변환하는 감시자를 선언하는 예제를 보여줍니다.
<template>
<div>
<input v-model="inputValue" type="text" placeholder="입력하세요">
<p>입력값: {{ inputValue }}</p>
<p>대문자로 변환된 값: {{ upperCaseValue }}</p>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: '',
upperCaseValue: ''
};
},
watch: {
inputValue(newValue, oldValue) {
this.upperCaseValue = newValue.toUpperCase();
}
}
}
</script>
설명
inputValue
데이터 속성은 사용자의 입력값을 저장합니다.upperCaseValue
데이터 속성은 감시자를 통해 대문자로 변환된 입력값을 저장합니다.watch
속성을 사용하여inputValue
를 감시합니다.inputValue
가 변경될 때마다 콜백 함수가 실행됩니다.- 콜백 함수에서는 새로운 값(
newValue
)을 대문자로 변환하여upperCaseValue
에 저장합니다.
주요 특징
- 반응성: 데이터의 변화를 실시간으로 감지하여 특정 동작을 수행합니다.
- 비동기 처리: 비동기 로직을 포함할 수 있어 데이터 변화에 따라 비동기적인 작업을 수행할 수 있습니다.