使用VUE的方法、表达式、计算属性、监听器实现计算器功能

最新推荐文章于 2024-05-30 11:27:58 发布

ZED7777777

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量115

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_74048015/article/details/129907774

版权

首先我们应该在hbuilder创建一个新的项目，再在js中引入vue.js

1.使用方法

在下列代码中我们要对运算符进行绑定，接着添加计算按钮并设置点击事件，在方法中使用switch语句对运算符进行判断，改变结果的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="zed">
			<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"/>
			<button @click="jisuan">计算</button>
			<br />
			结果:{{result}}<br />
 
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:"#zed",
			data:{
				number1:"",
				number2:"",
				result:"",
				opt:"+"
			},
			methods:{
				jisuan(){
					switch(this.opt){
						case"+":
						this.result=this.number1+this.number2;
						break;
						case"-":
						this.result=this.number1-this.number2;
						break;
						case"*":
						this.result=this.number1*this.number2;
						break;
						case"/":
						this.result=this.number1/this.number2;
						break;
					}
				}
			}
		});
	</script>
</html>

下图是效果图

2.接下来使用表达式

首先设置两个输入框来进行绑定我们要计算的值，这里要注意的是我们计算的类型为数字型，所以要使用v-model.numeber来设置，结果是用表达式的形式直接对两个输入的数值进行加减乘除操作。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="zed">
			<input type="text" placeholder="请输入第一个数" v-model.number="number1"/>
			<select>
				<option>+</option>
				<option>-</option>
				<option>*</option>
				<option>/</option>
			</select>
            <!--placeholder作用为当文本框中无内容时的提示字段  -->
			<input type="text" placeholder="请输入第二个数" v-model.number="number2"/>
			<br />
			结果:<br />
			+:{{number1+number2}}<br />
			-:{{number1-number2}}<br />
			*:{{number1*number2}}<br />
			/:{{number1/number2}}<br />
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:"#zed",
			data:{
				number1:"",
				number2:""
			}
		});
	</script>
</html>

下图为效果图

3.然后使用计算属性

跟方法差不多，只不过将methods换成了computed，并在方法中加上了return。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="zed">
			<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"/>
			<button @click="jisuan">计算</button>
			<br />
			结果:{{result}}<br />
 
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:"#zed",
			data:{
				number1:"",
				number2:"",
				result:"",
				opt:"+"
			},
			computed:{
				jisuan(){
					switch(this.opt){
						case"+":
						this.result=this.number1+this.number2;
						break;
						case"-":
						this.result=this.number1-this.number2;
						break;
						case"*":
						this.result=this.number1*this.number2;
						break;
						case"/":
						this.result=this.number1/this.number2;
						break;
					}
					return this.result;
				}
			}
		});
	</script>
</html>

下面是效果图

4. 最后使用监听器

在监听器中要对第一个数第二个数还有运算符进行监听，当他们发生变化时执行switch语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="zed">
			<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"/>
			<br />
			结果:{{result}}<br />
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:"#zed",
			data:{
				number1:"",
				number2:"",
				result:"",
				opt:""
			},
			watch:{
				number1:function(num1){
					switch(this.opt){
					case"+":
					this.result=num1+this.number2;
					break;
					case"-":
					this.result=num1-this.number2;
					break;
					case"*":
					this.result=num1*this.number2;
					break;
					case"/":
					this.result=num1/this.number2;
					break;
					}
				},
				number2:function(num2){
					switch(this.opt){
						case"+":
						this.result=this.number1+num2;
						break;
						case"-":
						this.result=this.number1-num2;
						break;
						case"*":
						this.result=this.number1*num2;
						break;
						case"/":
						this.result=this.number1/num2;
						break;
					}
				},
				opt:function(){
					switch(this.opt){
					case"+":
					this.result=this.number1+this.number2;
					break;
					case"-":
					this.result=this.number1-this.number2;
					break;
					case"*":
					this.result=this.number1*this.number2;
					break;
					case"/":
					this.result=this.number1/this.number2;
					break;
					}
				}
			}
		});
	</script>
</html>

下面是效果图