반응형
watch
watch 속성은 데이터 변화를 감지하고 정해진 로직을 수행합니다.
아래는 v-model를 이용한 watch 예제입니다.
예제
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Vue watch</title>
</head>
<body>
<div id="app">
<input v-model="message">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
message: 'Hello World'
},
watch:{
message: function(data){
console.log("message의 값 업데이트", data)
}
}
})
</script>
</body>
</html>
결과
input 박스의 데이터를 변경할때마다 v-model이 message 데이터를 동기화해주고,
watch 속성이 message 데이터의 변화를 감지하여 로직을 수행하고 있습니다.
반응형
'웹 개발' 카테고리의 다른 글
| 파비콘 생성사이트 / favicon-generator.org / favicon generator site (0) | 2024.03.14 |
|---|---|
| [Vue] computed 속성 / 특징, 예제 (0) | 2024.03.07 |
| [Vue] 주로 쓰이는 디렉티브 정리 (0) | 2024.03.04 |
| [CSS] flexbox 속성 재밌게 배우기 - [Flexbox Froggy] (1) | 2022.11.19 |
| JavaScript 예약어 모음 (0) | 2022.07.30 |
댓글