Vue简易计算器

m4587

已于 2022-09-23 09:05:19 修改

阅读量236

点赞数 1

文章标签： vue.js javascript 前端

于 2022-09-23 08:58:12 首次发布

本文链接：https://blog.csdn.net/m4587/article/details/127003502

版权

本文介绍了如何使用Vue.js创建一个简易计算器。通过为输入按钮绑定点击事件，根据用户点击的按钮执行不同的操作，如AC清零、加减乘除运算及结果显示。文章还展示了部分关键代码，并提供了运行效果图。

摘要由CSDN通过智能技术生成

Vue简易计算器

思路

为所有的input按钮绑定点击事
当进行点击的时候要知道用户点击的是哪个按钮
当知道哪个按钮的时候要进行一系列的操作
AC清零
X / + - 判断和运算
= 结果赋值

$\color{red}运行效果图$

$\color{green}部分代码如下$

<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>计算器</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.box {
			width: 340px;
			height: 520px;
			margin: 100px auto;
			border: 5px solid #533f03;
			box-sizing: border-box;
			background-color: #dcdcdc;
			padding: 10px;
			border-radius: 30px;
		}

		.box .result {
			height: 80px;
			/* padding-right: 20px; */
			background-color: rgb(53, 53, 53);
			color: white;
			line-height: 80px;
			text-align: right;
			font-size: 30px;
			padding: 0 30px;
			width: 100%;
			box-sizing: border-box;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			border-radius: 20px;
			margin-bottom: 10px;
		}

		.btnbox {
			display: flex;
			height: 380px;
			flex-wrap: wrap;
			justify-content: space-around;
			align-content: space-around;
		}

		.btnbox input {
			text-decoration: none;
			width: 70px;
			height: 70px;
			box-sizing: border-box;
			line-height: 70px;
			text-align: center;
			font-weight: bold;
			color: rgb(255, 42, 0);
			/* background-color: black; */
			font-size: 20px;
			box-shadow: 0px 0px 10px black inset;
			border-radius: 5px;
		}

		.btnbox .sp {
			width: 140px;
		}

		.btnbox input:active {
			box-shadow: 0px 0px 20px black inset;
			color: rgb(124, 3, 3);
		}
	</style>
</head>

<body>
	<div class="box" id="app">
		<div id="result" class="result">
			<span>{{ num1 }}</span>
			<span>{{ calcu }}</span>
			<span>{{ num2 }}</span>
			<span>{{ equal }}</span>
			<span>{{ res }}</span>
		</div>
		<div class="btnbox">
			<input type="button" class="sp" @click="settype" value="AC" />
			<input type="button" class="sp" @click="settype" value="=" />

			<input type="button" @click="setnum" value="1" />
			<input type="button" @click="setnum" value="2" />
			<input type="button" @click="setnum" value="3" />
			<input type="button" @click="settype" value="+" />

			<input type="button" @click="setnum" value="4" />
			<input type="button" @click="setnum" value="5" />
			<input type="button" @click="setnum" value="6" />
			<input type="button" @click="settype" value="-" />

			<input type="button" @click="setnum" value="7" />
			<input type="button" @click="setnum" value="8" />
			<input type="button" @click="setnum" value="9" />
			<input type="button" @click="settype" value="X" />

			<input type="button" @click="setnum" value="0" />
			<input type="button" @click="setnum" value="." />
			<input type="button" @click="settype" value="<<<" />
			<input type="button" @click="settype" value="/" />
		</div>

	</div>


	<script src="../js/vue.js"></script>
	<script>
		const vm = new Vue({
			el: "#app",
			data: {
				num1: "",
				calcu: "",
				num2: "",
				equal: "",
				res: ""
			},
			methods: {
				setnum(e) {
					if (this.calcu == "") {
						this.num1 = this.num1 + e.target.value
					} else {
						this.num2 = this.num2 + e.target.value
					}
				},
				settype(e) {
					if (e.target.value == "=" || e.target.value == "AC" ) {
						if (e.target.value == "=") {
							this.equal = "=";
						}
						if (e.target.value == "AC") {
							this.num1 = "";
							this.calcu = "";
							this.num2 = "";
							this.equal = "";
							this.res = "";
						}
						switch (this.calcu) {
							case "+":
								this.res = Number(this.num1) + Number(this.num2);
								break;

							case "-":
								this.res = this.num1 - this.num2
								break;

							case "X":
								this.res = this.num1 * this.num2
								break;

							case "/":
								this.res = this.num1 / this.num2
								break;
						}

					}
					else {
						if (this.equal != "=") {
							this.calcu = e.target.value
						}
					}
				}
			}
		})
	</script>
</body>

</html>