event 함수 생성시 매개변수로 이벤트 객체 e도 함께 선언해주어야 한다.
<!DOCTYPE html>
<html >
<head>
<title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<h1>Celsius vs Fahrenheit</h1>
<hr>
<div id="calc">
<!--text change 될 때 setC/setF 를 호출-->
<input type="number" @change="setC" v-bind:value="C">섭씨 =
<input type="number" @change="setF" v-bind:value="F">화씨
</div>
</body>
<script>
var calc = new Vue({
el: '#calc',
data:{
C: 0,
F: 32
},
methods:{
setC: function(e, c = e.target.value){
console.log(e);
this.C = c;
this.F = c * (9 / 5) + 32;
},
setF: function(e,f){
console.log(e);
this.F = f;
this.C = (f - 32) * (5 / 9);
}
}
})
</script>
</html>
'자바 공부 > [자바] 기본 공부' 카테고리의 다른 글
| [Vue.js] Axios (0) | 2024.12.05 |
|---|---|
| [Vue.js] Vue Router (0) | 2024.12.05 |
| [Vue.js] form 요소 활용하기 (2) | 2024.12.04 |
| [Vue.js] class 속성 변경하기 (0) | 2024.12.04 |
| [Vue.js] Methods, computed, watch (0) | 2024.12.03 |