简易计算器

最新推荐文章于 2024-09-13 14:34:15 发布

无畏-小丑

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量114

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_74829849/article/details/140122540

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.global.js"></script>
		<style>
			button {
				margin: 0 0 0 10px;
			}
		</style>
	</head>
	
	<body>
		<div id="app">
			<p>
				数1: <input type="text" v-model.number="num1">
			</p>
			<p>
				数2: <input type="text" v-model.number="num2">
			</p>
			<p>
				<button v-on:click="jia()">加</button>
				<button v-on:click="jian()">减</button>
				<button v-on:click="cheng()">乘</button>
				<button v-on:click="chu()">除</button>
				<br>
				<hr>
				结果为：{{num3}}
			</p>
		</div>
		<!-- 修饰符number：将输入的值转换为数值型 -->
		<script>
			const App = Vue.createApp({
				data() {
					return {
						num1: "",
						num2: "",
						num3: ""
					}
				},
				methods: {
					jia() {
						this.num3 = this.num1 + this.num2
					},
					jian() {
						this.num3 = this.num1 - this.num2
					},
					cheng() {
						this.num3 = this.num1 * this.num2
					},
					chu() {
						this.num3 = this.num1 / this.num2
					}
				}

			})
			App.mount("#app")
		</script>
	</body>
</html>