vue-加减乘除计算器案例

60 阅读 0 评论 40 点赞

我是靠谱客的博主激情咖啡豆，最近开发中收集的这篇文章主要介绍vue-加减乘除计算器案例，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!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>