☆ Code
<!doctype html>
<html>
<head>
<title>C to F</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<h1>Celsius vs. Fahrenheit</h1>
<hr>
<div id="calc">
<input type="number" @change="setC"
:value="C">섭씨 =
<input type="number" @change="setF"
:value="F">화씨
</div>
</body>
<script>
var cal = 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 = e.target.value){
console.log(e);
this.F = f;
this.C = (f - 32) * (5 / 9);
}
}
})
</script>
</html>'Vue' 카테고리의 다른 글
| Vue.js axios (1) | 2025.01.17 |
|---|---|
| Vue.js router (0) | 2025.01.16 |
| Vue.js form (0) | 2025.01.14 |
| Vue.js class (0) | 2025.01.13 |
| Vue.js methods, computed, watch (0) | 2025.01.12 |