シンプルなコンピュータのVue実装
- html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vueカスタム電卓の実装</title>
<!-- Cssスタイルコードの紹介-->
<link rel=stylesheet href="./d-1.css">
</head>
<body>
<div id="app">
<div id="app1">
<input type="number" v-model.number="num1" />
<select name="" id="" v-model.number="operator">
<option value="0">+</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
<input type="number" v-model.number="num2" />
<button @click="cal">=</button>
<strong>{{res}}</strong>
</div>
</div>
<!-- ネットワークが必要-->
<script src="https://..////..js"></>
<!-- jsコードを紹介する-->
<script src="./d-1.js"></script>
</body>
</html>
- ジャバスクリプト
const vm = new Vue({
el: "#app",
data() {
return {
num1: 0,
num2: 0,
operator: 0,
res: 0
}
},
methods: {
cal() {
switch (this.operator) {
case 0:
this.res = this.num1 + this.num2;
break;
case 1:
this.res = this.num1 - this.num2;
break;
case 2:
this.res = this.num1 * this.num2;
break;
case 3:
this.res = this.num1 / this.num2;
break;
}
}
}
});
- css
#app{
width: 100%;
height: 80%;
background-color: skyblue;
position: absolute;
}
#app1{
position: relative;
top: 5%;
left: 30%;
}
