vue-加减乘除计算器案例

最新推荐文章于 2023-04-03 13:24:53 发布

天马行空zqzq

最新推荐文章于 2023-04-03 13:24:53 发布

阅读量2.5k

点赞数

本文链接：https://blog.csdn.net/qq_42039912/article/details/107147257

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<input type="text" v-model="num1">
		<select v-model="fuHao">
			<option value="0">+</option>
			<option value="1">-</option>
			<option value="2">*</option>
			<option value="3">/</option>
		</select>
		<input type="text" v-model="num2">
		<button v-on:click="jiSuan">=</button>
		<span id="span">{{ result }}</span>
	</div>
	<script src="node_modules/vue/dist/vue.js"></script>
	<script>
		
		var app = new Vue({
			el: '#app',
			data: {
				num1: 0,
				fuHao: 1,
				num2: 0,
				result: 0
			},
			methods: {
				jiSuan: function () {
					 
					if(this.fuHao == 0) {
						this.result = Number(this.num1) + Number(this.num2)
					} else if (this.fuHao == 1) {
						this.result = Number(this.num1) - Number(this.num2)
					}else if (this.fuHao == 2) {
						this.result = Number(this.num1) * Number(this.num2)
					}else if (this.fuHao == 3) {
						this.result = Number(this.num1) / Number(this.num2)
					}
				}
			}
		})
	</script>
</body>
</html>