vue用方法,监听器,计算属性写出简易的计算器

weixin_62995273

已于 2023-04-02 21:25:43 修改

阅读量67

点赞数

文章标签： vue.js html

于 2023-04-02 19:56:45 首次发布

本文链接：https://blog.csdn.net/weixin_62995273/article/details/129915550

版权

文章展示了如何使用Vue.js的methods、监听器(watch)和计算属性(computed)来创建一个简单的计算器应用。用户输入两个数和运算符，程序根据运算符进行加、减、乘、除运算并显示结果。三种方法分别在不同的数据变化时触发计算逻辑。

摘要由CSDN通过智能技术生成

用方法的方式写:

思路是先在HTML的body标签中布好局,布完局之后基本上略微修改即可,然后在script中写出相应的方法。(因为计算器的计算符号可以确定,所以我们只用在methods方法中写出计算符号不同时所对应计算方式并返回即可[在监听器，计算属性中的样式同理])

话不多说，直接上用方法写的代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="number" placeholder="请输入第一个整数">
			<select v-model="opt">
				<option>+</option>
				<option>-</option>
				<option>*</option>
				<option>/</option>
			</select>
			<input type="text" v-model="numbers" placeholder="请输入第二个整数">
			<button @click="chang">结果</button>
			<input type="text" v-model="result">
		</div>
	</body>
	<script>
		var vm =new Vue({
			el:"#app",
			data:{
				  opt:"+",
				  number:"",
				  numbers:"",
				  result:""
			},
			methods:{
				  chang(){
					  if(this.opt=="+"){
						  return this.result=parseInt(this.number)+parseInt(this.numbers);
					  }else if(this.opt=="-"){
						   return this.result=parseInt(this.number)-parseInt(this.numbers);
					  }else if(this.opt=="*"){
						   return this.result=parseInt(this.number)*parseInt(this.numbers);
					  }else{
						   return this.result=parseInt(this.number)/parseInt(this.numbers);
					  }
				  }
			}
		})
	</script>
</html>

效果图如下：

第二种是用监听器的方法写代码:

因为代码中有3个变量分别是number,numbers,opt会改变，所以要监听这3个变量的变化即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
		<body>
			<div id="app">
				<input type="text" v-model.number="number" placeholder="请输入第一个整数">
				<select v-model="opt">
					<option>+</option>
					<option>-</option>
					<option>*</option>
					<option>/</option>
				</select>
				<input type="text" v-model.number="numbers" placeholder="请输入第二个整数">
				<button @click="chang">结果</button>
				<input type="text" v-model="result">
			</div>
		</body>
        <script>
        	var vm =new Vue({
        		el:"#app",
        		data:{
        			  opt:"+",
        			  number:"",
        			  numbers:"",
        			  result:""
        		},
			
        		watch:{
						     number(newnum){
									 if(this.opt=="+"){
													return this.result=newnum+this.numbers;
									 }else if(this.opt=="-"){
													return this.result=newnum-this.numbers;
									 }else if(this.opt=="*"){
													return this.result=newnum*this.numbers;
									 }else{
													return this.result=newnum/this.numbers;
												}
							  },
							  numbers(newnums){
									 if(this.opt=="+"){
										 return this.result=this.number+newnums;
									 }else if(this.opt=="-"){
										 return this.result=this.number-newnums;
									 }else if(this.opt=="*"){
										 return this.result=this.number*newnums;
									 }else{
										  return this.result=this.number/newnums;
																			}
							  },
							  opt(){
										 if(this.opt=="+"){
											 return this.result=this.number+this.numbers;
										 }else if(this.opt=="-"){
											   return this.result=this.number-this.numbers;
										  }else if(this.opt=="*"){
												   return this.result=this.number*this.numbers;
										  }else{
												   return this.result=this.number/this.numbers;
												}
													}
        	           },
				methods:{
					chang(){
						 return this.result;
					}
					      
				}
					 
			})
        </script>
</html>

效果图如下：

第三种是用计算属性的方法写代码:

思路大致和第一种的方法相同只需要小改一下script中的代码即可:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="number" placeholder="请输入第一个整数">
			<select v-model="opt">
				<option>+</option>
				<option>-</option>
				<option>*</option>
				<option>/</option>
			</select>
			<input type="text" v-model="numbers" placeholder="请输入第二个整数">
			<button @click="chang">结果</button>
			<input type="text" v-model="result">
		</div>
		<script>
			var vm=new Vue({
				el:"#app",
				data:{
					  opt:"+",
					  number:"",
					  numbers:"",
					  result:""
				},
				computed:{
					chang(){
							if(this.opt=="+"){
								  return this.result=parseInt(this.number)+parseInt(this.numbers);
							}else if(this.opt=="-"){
						    	  return this.result=parseInt(this.number)-parseInt(this.numbers);
							}else if(this.opt=="*"){
								  return this.result=parseInt(this.number)*parseInt(this.numbers);
							}else{
								  return this.result=parseInt(this.number)/parseInt(this.numbers);
							}
						}
					}
			})
		</script>
	</body>
</html>

效果图如下：