使用vue编写简易计算机

最新推荐文章于 2023-04-03 13:20:58 发布

mzw8899

最新推荐文章于 2023-04-03 13:20:58 发布

阅读量120

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/mzw8899/article/details/129915573

版权

本文介绍了如何使用Vue.js编写一个简易计算机。首先通过v-model双向绑定实现数值输入，然后利用select元素和option标签设计运算符号选择，接着通过switch语句处理运算逻辑，最后调整样式完成整体布局。

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

1.以下为全部代码，仅供参考。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计算机</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div class="box">
				<input type="text" v-model="num1" placeholder="请输入第1个数" />
				<select v-model="operator">
					<option value="+">+</option>
					<option value="-">-</option>
					<option value="*">*</option>
					<option value="/">/</option>
				</select>
				<input type="text" v-model="num2" placeholder="请输入第2个数" />
				<button @click="calcuate