vue使用方法，侦听器，计算属性三种方式实现简易计算器-526互联

今天我们用vue中方法，计算属性，还有监听器来完成一个简易的小型计算器

一. 代码实现效果

二.代码实现

1.创建一个web项目，导入本地js文件实例化vue对象并挂载DOM节点

2.方法实现计算器

框架分析：

1.创建输入框用来输入数据，创建按钮计算结果

2.v-model属性使用,利用v-model动态绑定输入框获取用户输入的数字和符号

3.方法思路，通过v-model获取到用户符号用if-else或者switch语句进行计算

3.计算属性实现计算器

计算属性和方法的实现类型基本一样，将值返回给res后输出

4.监听器实现计算器

创建第一个监听器用来监听用户更改的第一个数字并定义val接收改变的值

创建第二个监听器用来监听用户更改的第二个数字并定义val接收改变的值

创建符号监听器，满足用户切换操作运算符需求

三.完整代码

<body>
		<div id="app">
			<input type="text" placeholder="请输入第一个数" v-model.number="number3" />
			<select v-model="opt1"  >
				<option>+</option>
				<option>-</option>
				<option>*</option>
				<option>/</option>
			</select>
			<input type="text" placeholder="请输入第二个数" v-model.number="number4"  />
			<button @click="change">计算</button>{{finaly}}
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:"#app",
			data:{
				number1: "",
				number2: "",
				opt1:"+",
				finaly:""
			},
			methods:{
			    change(){
			        if(this.opt1 == "+") {
			            this.finaly = this.number3 + this.number4;
			        } else if(this.opt1 == "-") {
			            this.finaly = this.number3 - this.number4;
			        } else if(this.opt1 == "*") {
			            this.finaly = this.number3 * this.number4;
			        } else if(this.opt1 == "/"){
			            this.finaly = this.number3 / this.number4;
			        }
			    }
			}
		})
	</script>