使用vue.js制作一个简易的计算器

最新推荐文章于 2024-04-19 16:48:39 发布

琉璃愿275

最新推荐文章于 2024-04-19 16:48:39 发布

阅读量221

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_67416447/article/details/137541674

版权

话不多说，展示！！

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>简易计算器</title>
	<script src="vue.js"></script>
	<style type="text/css">
		/* table{
				width: 200px;
			}
			tr{
				width: 100px;
			} */
		button {
			width: 50px;
			height: 40px;
			background-color: #f8f8ff;
			border-radius: 5px;
			border: 1px solid #f8f8ff;
			transition: all 0.3s ease-in-out;




		}

		button:hover {
			border-color: #222;
			background-color: #d3d3d3;
		}

		input {
			width: 95px;
			height: 35px;
			background-color: #f8f8ff;
			border: 1px solid #f8f8ff;
			font-size: 16px;
		}
	</style>
</head>

<body>
	<div id="low">
		<table cellpadding="1" cellspacing="0" width="150px" height="200px">
			<tr>
				<td><button @click="dele">del</button></td>
				<td><button @click="clear">c</button></td>
				<td colspan="2"><input type="text" value="dsagsd" v-model:value="message" /></td>
			</tr>
			<tr>
				<td><button value="7" @click="sum">7</button></td>
				<td><button value="8" @click="sum">8</button></td>
				<td><button value="9" @click="sum">9</button></td>
				<td><button value="/" @click="sum">/</button></td>
			</tr>

			<tr>
				<td><button value="4" @click="sum">4</button></td>
				<td><button value="5" @click="sum">5</button></td>
				<td><button value="6" @click="sum">6</button></td>
				<td><button value="*" @click="sum">*</button></td>
			</tr>

			<tr>
				<td><button value="1" @click="sum">1</button></td>
				<td><button value="2" @click="sum">2</button></td>
				<td><button value="3" @click="sum">3</button></td>
				<td><button value="-" @click="sum">-</button></td>
			</tr>
			<tr>
				<td><button value="0" @click="sum">0</button></td>
				<td><button value="." @click="sum">.</button></td>
				<td><button value="+" @click="sum">+</button></td>
				<td><button value="=" @click="comput">=</button></td>
			</tr>
		</table>
	</div>

	<script type="text/javascript">
		var vm = new Vue({
			el: "#low",
			data: {
				message: ''
			},

			methods: {
				dele: function () {
					this.message = this.message.substring(0, this.message.length - 1);
				},
				clear: function () {
					this.message = " ";
				},
				sum: function (e) {
					this.message += e.target.value;
				},
				comput: function () {

					var pression = this.message;
					try {
						var result = eval(pression);
						this.message = result.toString()
					} catch (error) {
						alert("无效表达式!！")
					}

				}
			}
		})
	</script>
</body>

</html>