Vue三种方法实现简易计算器。

计算器实现：

方法1：使用v-model进行双向绑定。

方法2：使用computed计算属性。

方法3：使用watch侦听属性。

1.定义自定义方法getResult，该方法用来计算表达式的值。

``

<head>
	<meta charset="utf-8">
	<title></title>
<script src="js/vue.js"></script>
</head>

​ 


		<div id="app">
			<!--v-model数据双向绑定  -->
			<input id="input" type="number" v-model="num1"  @click="getResult" /> 
			 <select v-model="opt" @click="getResult">
			 	<option value ="+">+</option>
				<option value ="-">-</option>
				<option value ="*">*</option>
				<option value ="/">/</option>
			 </select>
			<input type="number" v-model="num2"  @click="getResult"/>
			<input type="text" v-model="result"  />
		</div>
		<script >
			var vm = new Vue({
				el:'#app',
				data:{
					num1:0,//第一输入框中的数字
					num2:0,//第二输入框中的数字
					result:null,//计算结果
					opt:''//默认选择的运算符 可以设置为 '','+','-','*','/','%'
				},
				methods:{
					//计算表达式num1 (+ or - or * or / or %) num2 的值
					getResult(){
						if(this.opt === '') //未选择运算符时跳过运算
							return
						var str = this.num1 + this.opt + this.num2;
						this.result = eval(str);//使用eval计算表达式
					}
				},
				created:function(){
					this.getResult() //如果设定了初值，计算结果
				}
			})
		</script>
``

2.当有一些数据需要随着其他数据变动而变动时就需要使用computed计算属性。``

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!--v-model数据双向绑定  placeholder用于输入框的提示信息-->
			<input  type="number" v-model="number1" placeholder="请输入数字" />
			 <select v-model="opt">
			 	<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" placeholder="计算结果"/>
		</div>
		<script >
			var vm = new Vue({
				el:'#app',
				data:{
					number1:0,//第一输入框中的数字
					number2:0,//第二输入框中的数字
					opt:''//默认选择的运算符 
				},
				computed:{
					result:function(){//函数调用
						if(this.opt == '' || this.number1=='' || this.number2 =='') //表达式不完整时跳过运算
							return null
						return eval(`${this.number1}${this.opt}(${this.number2})`)//使用eval计算表达式的值
					}
				}
			})
		</script>
	</body>
</html>

3.只需监听当前Vue实例中的数据变化，就会调用当前数据绑定的事件处理方法。

`

<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

​ 

		<div id="app">
			<input  type="number" v-model="num1" placeholder="请输入数字" /> 
			 <select v-model="opt">
			 	<option value ="+">+</option>
				<option value ="-">-</option>
				<option value ="*">*</option>
				<option value ="/">/</option>
			 </select>
			<input type="number" v-model="num2" placeholder="请输入数字"/>
			<input type="text" v-model="result"  placeholder="计算结果"/>
		</div>
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					num1:0,
					num2:0,
					result:null,
					opt:''
				},
				methods:{
					//求出计算结果的方法
					com:function(){
						//当表达式不完整时停止运算
						if(this.opt === '' || this.num1=='' || this.num2==''){
							this.result = null
							return
						}
						this.result = eval(`${this.num1}${this.opt}(${this.num2})`)
					}
				},
				watch:{
					//如果num1发生改变，下面的函数就会运行
					num1:function(){
						this.com()
					},
					//如果num2发生改变，下面的函数就会运行
					num2:function(){
						this.com()
					},
					//如果opt发生改变，下面的函数就会运行
					opt:function(){
						this.com()
					}
				},
				created(){
					this.com()
				}
			})
		</script>

​

`
posted @ 2023-04-02 16:29  Shemme霖  阅读(1435)  评论(0)    收藏  举报