用Vue.js做一个简易计算器_使用vue.js完成一个简易的加减乘除-CSDN博客

本文链接：https://blog.csdn.net/m0_69172645/article/details/129915808

1.首先导入Vue.js包

<script src="js/vue.js" type="text/javascript"></script>

2.然后是Html整体布局代码

<body>
		<div id="app">
			<input type="text" placeholder="请输入第一个数" v-model="n.v1" />
			<select>
				<option >+</option>
				<option >-</option>
				<option >*</option>
				<option >/</option>
			</select>
			<input type="text" placeholder="请输入第二个数" v-model="n.v2" />
			<button >=</button>
			<span>{{n.v3}}</span>
			<br />
		</div>
	</body>

3.Vue.js部分如下

	<script>
		var vm = new Vue({
			el:"#app",
			data:{
				n:{
					v1:1,
					v2:2,
					v3:2,
					type:"+",
				}
			},
			watch:{
				"n":{
					handler(nva1){
						this.n.v3 = eval(this.n.v1+this.n.type+this.n.v2);
					},
					deep:true,
				}
			}
		})
	</script>

4.整体代码和运行结果如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" placeholder="请输入第一个数" v-model="n.v1" />
			<select>
				<option >+</option>
				<option >-</option>
				<option >*</option>
				<option >/</option>
			</select>
			<input type="text" placeholder="请输入第二个数" v-model="n.v2" />
			<button >=</button>
			<span>{{n.v3}}</span>
			<br />
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:"#app",
			data:{
				n:{
					v1:1,
					v2:2,
					v3:2,
					type:"+",
				}
			},
			watch:{
				"n":{
					handler(nva1){
						this.n.v3 = eval(this.n.v1+this.n.type+this.n.v2);
					},
					deep:true,
				}
			}
		})
	</script>
</html>

效果图：