还在学习阶段,代码很粗糙,请大佬们指正,也希望能给其他正在学习Vue的人一点启发
Vue的代码只用到了v-model和v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器plus</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<input style="height: 50px;width: 220px" v-model="result" type="text"><br>
<input type="button" @click="flag(7)" value="7" style="height: 50px ;width: 50px">
<input type="button" @click="flag(8)" value="8" style="height: 50px ;width: 50px">
<input type="button" @click="flag(9)" value="9" style="height: 50px ;width: 50px">
<input type="button" @click="clear()" value="C" style="height: 50px ;width: 50px">
<br>
<input type="button" @click="flag(4)" value="4" style="height: 50px ;width: 50px">
<input type="button" @click="flag(5)" value="5" style="height: 50px ;width: 50px">
<input type="button" @click="flag(6)" value="6" style="height: 50px ;width: 50px">
<input type="button" @click="flag('-')" value="-" style="height: 50px ;width: 50px">
<br>
<input type="button" @click="flag(1)" value="1" style="height: 50px ;width: 50px">
<input type="button" @click="flag(2)" value="2" style="height: 50px ;width: 50px">
<input type="button" @click="flag(3)" value="3" style="height: 50px ;width: 50px">
<input type="button" @click="flag('+')" value="+" style="height: 50px ;width: 50px">
<br>
<input type="button" @click="flag('/')" value="÷" style="height: 50px ;width: 50px">
<input type="button" @click="flag(0)" value="0" style="height: 50px ;width: 50px">
<input type="button" @click="flag('*')" value="*" style="height: 50px ;width: 50px">
<input type="button" @click="count()" value="=" style="height: 50px ;width: 50px">
<br>
<input type="text" v-model="firstNum" ><br>
<input type="text" v-model="symbol" ><br>
<input type="text" v-model="lastNum" ><br>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
firstNum: "",
symbol: "",
lastNum: "",
result: ""
},
methods: {
flag(e) {
if (this.symbol == "") {
if (e != "+" && e != "-" && e != "*" && e != "/" && e != "C") {
this.firstNum += e
this.result += e
} else {
this.symbol = e
this.result += e
}
} else if (e != "+" && e != "-" && e != "*" && e != "/" && e != "C") {
this.lastNum += e
this.result += e
} else {
switch (this.symbol) {
case '+':
this.result = Number(this.firstNum) + Number(this.lastNum)
this.firstNum = this.result
this.symbol = e
this.lastNum = ""
break
case '-':
this.result = Number(this.firstNum) - Number(this.lastNum)
this.firstNum = this.result
this.symbol = e
this.lastNum = ""
break
case '*':
this.result = Number(this.firstNum) * Number(this.lastNum)
this.firstNum = this.result
this.symbol = e
this.lastNum = ""
break
case '/':
this.result = Number(this.firstNum) / Number(this.lastNum)
this.firstNum = this.result
this.symbol = e
this.lastNum = ""
break
}
this.result += this.symbol
}
},
count() {
switch (this.symbol) {
case '+':
this.result = Number(this.firstNum) + Number(this.lastNum)
this.firstNum = this.result
this.symbol = ""
this.lastNum = ""
break
case '-':
this.result = Number(this.firstNum) - Number(this.lastNum)
this.firstNum = this.result
this.symbol = ""
this.lastNum = ""
break
case '*':
this.result = Number(this.firstNum) * Number(this.lastNum)
this.firstNum = this.result
this.symbol = ""
this.lastNum = ""
break
case '/':
this.result = Number(this.firstNum) / Number(this.lastNum)
this.firstNum = this.result
this.symbol = ""
this.lastNum = ""
break
}
},
clear() {
this.firstNum = ""
this.symbol = ""
this.lastNum = ""
this.result = ""
}
}
})
</script>
</html>