HBuilder Vue 加减乘除

HTML

<template>
	<view>
		<div id="layout1">
			<input type="text" v-model.number="num1" value="" @click="clean_num1()" />+
			<input type="text" v-model.number="num2" value="" @click="clean_num2()" />=
			<p>{{ resulta }}</p>
		</div>
		<div id="layout2">
			<input type="text" v-model.number="num3" value="" @click="clean_num3()" />-
			<input type="text" v-model.number="num4" value="" @click="clean_num4()" />=
			<p>{{ resultb }}</p>
		</div>
		<div id="layout3">
			<input type="text" v-model.number="num5" value="" @click="clean_num5()" />×
			<input type="text" v-model.number="num6" value="" @click="clean_num6()" />=
			<p>{{ resultc }}</p>
		</div>
		<div id="layout4">
			<input type="text" v-model.number="num7" value="" @click="clean_num7()" />÷
			<input type="text" v-model.number="num8" value="" @click="clean_num8()" />=
			<p>{{ resultd }}</p>
		</div>
		<div>
			<button @click="calc">计算</button>
		</div>
	</view>
</template>

JS

<script>
	export default {
		data() {
			return {
				num1: '',
				num2: '',
				num3: '',
				num4: '',
				num5: '',
				num6: '',
				num7: '',
				num8: '',
				resulta: '',
				resultb: '',
				resultc: '',
				resultd: ''
			}
		},
		methods: {
			calc: function() {
				this.resulta = this.num1 + this.num2;
				this.resultb = this.num3 - this.num4;
				this.resultc = this.num5 * this.num6;
				this.resultd = this.num7 / this.num8;
			},
			clean_num1: function() {
				this.num1 = ''
			},
			clean_num2: function() {
				this.num2 = ''
			},
			clean_num3: function() {
				this.num3 = ''
			},
			clean_num4: function() {
				this.num4 = ''
			},
			clean_num5: function() {
				this.num5 = ''
			},
			clean_num6: function() {
				this.num6 = ''
			},
			clean_num7: function() {
				this.num7 = ''
			},
			clean_num8: function() {
				this.num8 = ''
			}
		}
	}
</script>

CSS

<style>
	* {
		margin: 0;
		padding: 0;
	}

	view {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	div {
		width: 100%;
		line-height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	image {
		width: 40rpx;
		height: 40rpx;
		background-color: #000000;
	}

	input {
		width: 100rpx;
		height: 100rpx;
		text-align: center;
		align-items: center;
		border: 1rpx solid #e2e2e2;
		background-color: #ffffff;
		color: #000000;
	}

	button {
		width: 50%;
	}

 	#sum {
		width: 20%;
	}

	#计算 {
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>