Vue用普通方法，监听器方法和计算属性方法写计算机-CSDN博客

本文链接：https://blog.csdn.net/Fy_wppwpwpo/article/details/129910792

一，同普通方法实现简易计算器

首先来看看用普通方法的全部代码以及实现的简易计算器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用普通方法实现简易计算器</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!--当键盘按下或者鼠标点击时触发事件-->
			<input type="number" v-model="number1" @click="getResult" placeholder="请输入的一个数字"/> 
			 <select v-model="moren" @click="getResult">
				<option value ="">请选择</option>
			 	<option value ="+">+</option>
				<option value ="-">-</option>
				<option value ="*">*</option>
				<option value ="/">/</option>
			 </select>
			<input type="number" v-model="number2" @click="getResult" placeholder="请输入第二个数字"/>
			<input type="text" v-model="result" onfocus="this.blur()" placeholder="最终结果"/>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					number1:"",//
					number2:"",//
					result:null,//计算结果
					moren:''//默认选择的运算符 可以设置为 '','+','-','*','/','%'
				},
				methods:{
					//计算表达式number1 (+ or - or * or / or %) number2 的值
					getResult(){
						if(this.moren === '') //未选择运算符时跳过运算
							return
						var str = this.number1 + this.moren + this.number2;//拼接表达式
						this.result = eval(str);//使用eval计算表达式的值
					}
				},
				created:function(){
					this.getResult() //如果设定了初值，计算该表达式的结果
				}
			})
		</script>
	</body>
</html>

1.其中<<input type="number>>是用来调节数字值的大小的

2.<<input οnfοcus="this.blur()">>是禁止在“最终结果框”输入的

3. <<select>>表单元素作用是可以使你在加减乘除里面随便切换

4.<<v-model>>双向绑定 v-model绑定input框的值，绑定input键盘按下和鼠标点击时触发自定义方法moren，该方法用来计算表达式的值。

二，用watch侦听属性实现简易计算器

vue中提供了watch方法，可以监听data内的某些数据的变动，触发相应的方法。

watch的使用
首先确认 watch是一个对象，一定要当成对象来用。

对象就有键，有值。

键：就是你要监控的那个变量。比如说$route，这个就是要监控路由的变化。或者是data中的某个变量。

值：1.可以是函数：就是当你监控的变量变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是变化后的值。

2.值也可以是函数名：不过这个函数名要用单引号来包裹。

来看看用watch侦听属性全部代码以及实现的简易计算器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用watch侦听属性实现简易计算器</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="number" v-model="number1" placeholder="请输入第一个数字" /> 
			 <select v-model="moren">
				<option value ="">请选择</option>
			 	<option value ="+">+</option>
				<option value ="-">-</option>
				<option value ="*">*</option>
				<option value ="/">/</option>
			 </select>
			<input type="number" v-model="number2" placeholder="请输入第二个数字"/>
			<input type="text" v-model="result" onfocus="this.blur()" placeholder="请输入完整的表达式"/>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					number1:"",
					number2:"",
					result:null,
					moren:''
				},
				methods:{
					//求出计算结果的方法
					calculation:function(){
						//当表达式不完整时停止运算
						if(this.moren === '' || this.number1=='' || this.number2==''){
							this.result = null
							return
						}
						this.result = eval(`${this.number1}${this.moren}(${this.number2})`)
					}
				},
				watch:{
					//如果number1发生改变，下面的函数就会运行
					number1:function(){
						this.calculation()
					},
					//如果number2发生改变，下面的函数就会运行
					number2:function(){
						this.calculation()
					},
					//如果moren发生改变，下面的函数就会运行
					moren:function(){
						this.calculation()
					}
				},
				created(){
					this.calculation()
				}
			})
		</script>
	</body>
</html>

watch侦听属性方法总结：

优点：数据变化时执行异步或开销较大的操作时，这个方式是最有用的

缺点：当监测对象非常多的时候代码量就会非常大代码冗余

三，用计算属性方法实现简易计算器

用计算属性方法的全部代码以及实现的计算器

将计算结果设定为一个computed计算属性，该属性与两个表单中的数字相关联，每当数字发生改变自动计算出结果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用计算方法实现简易计算器</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input id="input" type="number" v-model="number1" placeholder="请输入第一个数字" />
			 <select v-model="moren">
				<option value ="">请选择</option>
			 	<option value ="+">+</option>
				<option value ="-">-</option>
				<option value ="*">*</option>
				<option value ="/">/</option>
			 </select>
			<input type="number" v-model="number2" placeholder="请输入第二个数字"/>
			<input type="text" v-model="result" onfocus="this.blur()" placeholder="请输入完整的表达式"/>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					number1:"",//第一输入框中的数字
					number2:"",//第二输入框中的数字
					moren:''//默认选择的运算符 可以设置为 '','+','-','*','/','%'
				},
				computed:{
					result:function(){
						if(this.moren === '' || this.number1=='' || this.number2 =='') //表达式不完整时跳过运算
							return null
						return eval(`${this.number1}${this.moren}(${this.number2})`)//使用eval和模板字符串计算表达式的值
					}
				}
			})
		</script>
	</body>
</html>