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

今天我们用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>

计算属性实现

<body>
		<div id="app">
			<input type="text" placeholder="请输入第一个数" v-model.number="number1" />
			<select v-model="opt">
				<option>+</option>
				<option>-</option>
				<option>*</option>
				<option>/</option>
			</select>
			<input type="text" placeholder="请输入第二个数" v-model.number="number2" />
			{{number1}}{{opt}}{{number2}}<br />
			结果为：{{res}}<br /><br />
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:"#app",
			data:{
				number1: "",
				number2: "",
				opt:"+",
			},
			computed:{
			    res(){
			        if(this.opt == "+") {
			            return this.number1 + this.number2;
			        } else if(this.opt == "-") {
			            return this.number1 - this.number2;
			        } else if(this.opt == "*") {
			            return this.number1 * this.number2;
			        } else if(this.opt == "/"){
			            return this.number1 / this.number2;
			        }
			    }
			}
		})
	</script>

监听器实现

	<body>
		<div id="app">
			<input type="text" placeholder="请输入第一个数" v-model.number="number5" />
			<select v-model="opt2">
				<option>+</option>
				<option>-</option>
				<option>*</option>
				<option>/</option>
			</select>
			<input type="text" placeholder="请输入第二个数" v-model.number="number6" />
			<br />
			结果为：{{result}}<br /><br />
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				number5: "",
				number6: "",
				opt2: "+",
				result: ""
			},
			watch: {
				number5(val) {
					if (this.opt2 == "+") {
						this.result = val + this.number6;
					} else if (this.opt2 == "-") {
						this.result = val - this.number6;
					} else if (this.opt2 == "*") {
						this.result = val * this.number6;
					} else if (this.opt2 == "/") {
						this.result = val / this.number6;
					}
				},
				number6(val) {
					if (this.opt2 == "+") {
						this.result = this.number5 + val;
					} else if (this.opt2 == "-") {
						this.result = this.number5 - val;
					} else if (this.opt2 == "*") {
						this.result = this.number5 * val;
					} else if (this.opt2 == "/") {
						this.result = this.number5 / val;
					}
				},
				opt2(val) {
					if (val == "+") {
						this.result = this.number5 + this.number6;
					} else if (val == "-") {
						this.result = this.number5 - this.number6;
					} else if (val == "*") {
						this.result = this.number5 * this.number6;
					} else if (val == "/") {
						this.result = this.number5 / this.number6;
					}
				}
			}

 

posted @ 2023-04-02 16:32  QAQ000aaa  阅读(163)  评论(0)    收藏  举报