使用Vue的方法、表达式、监听器、计算属性四种形式完成简单的计算功能

最新推荐文章于 2024-02-22 11:50:32 发布

srgrshshgth

最新推荐文章于 2024-02-22 11:50:32 发布

阅读量73

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/srgrshshgth/article/details/129909285

版权

1先将Vue放进HTML项目中的js文件下

2.使用Vue的方法、表达式、监听器、计算属性四种形式完成简单的计算功能

2.1使用表达式实现简单的计算功能，首先接入Vue.js然后定义div，写两个输入框使用v-model把输入框与js代码进行绑定，把计算符号写入select属性中可进行选择

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="ww">
			<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:"#ww",
			data:{
				number1:"",
				number2:""
			}
		});
	</script>
</html>

运行结果

2.2使用方法实现简单的计算功能，方法加了一个计算按钮和点击事件属性及运算符号的绑定使用switch语句进行判断来改变结果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="ww">
			<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:"#ww",
			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.3使用监听器实现简单的计算功能，使用watch监听第一和第二两数字及运算符号，当他们发生变化时执行switch语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="ww">
			<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:"#ww",
			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>

运行结果

2.4使用计算属性实现简单的计算功能，计算属性与方法类似，只不过将methods换成了computed

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="ww">
			<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:"#ww",
			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>

运行结果