vue用三种方法做出简易计算器

最新推荐文章于 2024-07-16 19:54:42 发布
最新推荐文章于 2024-07-16 19:54:42 发布
阅读量722 收藏 4
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s5432111/article/details/129917394
版权

方法:

        先引入vue之后用div创建布局，再然后用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="number1" placeholder="请输入第一个整数">
			<select v-model="opt">
				<option>+</option>
				<option>-</option>
				<option>*</option>
				<option>/</option>
			</select>
			<input type="text" v-model="number2" placeholder="请输入第二个整数">
			<button @click="change">结果</button>
			<input type="text" v-model="result">
					</div>
			</body>
			<script>
		var vm =new Vue({
			el:"#app",
			data:{
				  opt:"+",
				  number1:"",
				  number2:"",
				  result:""
			},
			methods:{
				  change(){
					  if(this.opt=="+"){
						  return this.result=parseInt(this.number1)+parseInt(this.number2);
					  }else if(this.opt=="-"){
						   return this.result=parseInt(this.number1)-parseInt(this.number2);
					  }else if(this.opt=="*"){
						   return this.result=parseInt(this.number1)*parseInt(this.number2);
					  }else{
						   return this.result=parseInt(this.number1)/parseInt(this.number2);
					  }
				  }
			}
		})
	</script>
</html>

  效果：

      

第二种：

用监听器的方法 做计算器，先用v-model.number绑定两个数字，之后用watch监听这两个数字，根据输入的数字以及运算符不同来输出。

代码如下：

<!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="number1" placeholder="请输入第一个整数">
				<select v-model="opt">
					<option>+</option>
					<option>-</option>
					<option>*</option>
					<option>/</option>
				</select>
				<input type="text" v-model.number="number2" placeholder="请输入第二个整数">
				<button @click="change">结果</button>
				<input type="text" v-model.number="result">
			</div>
		</body>
        <script>
        	var vm =new Vue({
        		el:"#app",
        		data:{
        			  opt:"+",
        			  number1:"",
        			  number2:"",
        			  result:""
        		},
				computed:{
					change(){
						if(this.opt=="+"){
							  return this.result=parseInt(this.number1)+parseInt(this.number2);
						}else if(this.opt=="-"){
							  return this.result=parseInt(this.number1)-parseInt(this.number2);
						}else if(this.opt=="*"){
							  return this.result=parseInt(this.number1)*parseInt(this.number2);
						}else{
							  return this.result=parseInt(this.number1)/parseInt(this.number2);
						}
					}
				},
        		wathch:{
					  number(newnum){
						     if(this.opt=="+"){
											return this.result=newnum+this.number1;
						     }else if(this.opt=="-"){
											return this.result=newnum-this.number1;
						     }else if(this.opt=="*"){
											return this.result=newnum*this.number1;
						     }else{
						        	        return this.result=newnum/this.number1;
						     			}
					  },
					  numbers(newnums){
					  		 if(this.opt=="+"){
					  		 	 return this.result=this.number2+newnums;
					  		 }else if(this.opt=="-"){
					  		     return this.result=this.number2-newnums;
					  		 }else if(this.opt=="*"){
					  		     return this.result=this.number2*newnums;
					  		 }else{
					  		      return this.result=this.number2/newnums;
					  		 					  					}
					  		 									}
					  },
					  opt(){
					          	  if(this.opt=="+"){
					  				 return this.result=this.number1+this.number2;
					  			  }else if(this.opt=="-"){
					  				   return this.result=this.number1-this.number2;
					  			  }else if(this.opt=="*"){
					  					   return this.result=this.number1*this.number2;
					  			  }else{
					  			     	   return this.result=this.number1/this.number2;
					  					}
											}
        	})
        </script>
</html>

效果图：

第三种：

用计算属性的方法

代码如下：

<!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="number1" placeholder="请输入第一个整数">
			<select v-model="opt">
				<option>+</option>
				<option>-</option>
				<option>*</option>
				<option>/</option>
			</select>
			<input type="text" v-model="number2" placeholder="请输入第二个整数">
			<button @click="disan">结果</button>
			<input type="text" v-model="result">
		</div>
		<script>
			var vm=new Vue({
				el:"#app",
				data:{
					  opt:"+",
					  number1:"",
					  number2:"",
					  result:""
				},
				computed:{
					disan(){
							if(this.opt=="+"){
								  return this.result=parseInt(this.number1)+parseInt(this.number2);
							}else if(this.opt=="-"){
						    	  return this.result=parseInt(this.number1)-parseInt(this.number2);
							}else if(this.opt=="*"){
								  return this.result=parseInt(this.number1)*parseInt(this.number2);
							}else{
								  return this.result=parseInt(this.number1)/parseInt(this.number2);
							}
						}
					}
			})
		</script>
	</body>
</html>

效果：

 

s5432111
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
使用vue实现简易计算器
qq_65771833的博客
04-02 481
效果明显，代码简单，方法贼多。
使用Vue实现简单计算器
10-15
主要为大家详细介绍了使用Vue实现简单计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue实现简易计算器
qq_41720578的博客
05-24 2262
主要采用了javascript中的eval函数和vue.js中的v-for 和v-model来实现计算器，其中处理括号的部分采用栈的特点处理。 <head> <title>Title</title> //引入vue <script type="text/javascript" src="js/vue.js"></script> //简单设置下样式 <style> #app{
使用Vue制作一个简单的计算器
最新发布
qq_59866139的博客
07-16 393
使用Vue设计一个简单的计算器
Vue实现简单计算器
qq_36842789的博客
02-10 2909
效果
vue实现简易计算器
weixin_30273175的博客
09-27 325
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简易计算器</title> <script src="./lib/vue.js"></script> </h...
【Vue实现简单的计算器】
weixin_64313784的博客
04-02 2420
vue使用三种方法实现一个简单的计算器
Vue开发-实用vue实现简易计算器项目.zip
05-09
在本项目中，我们将深入探讨如何使用Vue.js框架来实现一个简易计算器。Vue.js是一个流行的前端JavaScript库，它以其易学易用、组件化和灵活的特性受到开发者们的喜爱。这个"Vue开发-实用vue实现简易计算器项目"旨在...
一个基于vue的简易计算器
12-29
总之，这个基于Vue的简易计算器项目展示了如何利用现代Web技术栈（HTML、CSS和JavaScript）来实现交互式的用户界面。Vue.js的特性，如数据绑定、组件化和响应式系统，使得开发过程更加高效，同时提供了优秀的用户...
用Vue.js做一个简易计算器
m0_75225965的博客
04-02 107
等于
vue3.0实现简易版计算器
Handsome_gir的博客
04-12 1483
通过两个数字计算对应的结果，两个输入框必须都输入，输入后点击对应的按钮计算对应的结果，将结果展示页面上，点击clear将输入的数字和结果清空。
使用Vue三种方法实现简单计算器
2201_75939414的博客
04-02 3518
4:Vue.js使用@click指令绑定一个点击事件，并调用pd()方法，根据用户输入的数字和操作符计算结果，并将结果保存到result变量中。使用v-model指令将result变量的值绑定到结果显示输入框中，从而实现实时更新结果。代码实现了一个简单的计算器，用户可以在输入框中输入两个数字，选择一个操作符，并点击“等于”按钮，Vue.js会根据用户的输入进行计算，并将结果显示在另一个输入框中。2:methods属性中定义了一个方法pd()，用于根据用户的输入计算结果，并将结果保存到result变量中。
vue实现简易计算器，vue基础
zm8454的博客
07-26 2953
这样使用vue就可以实现简单的计算器啦，赶快试试吧！觉得好玩，喜欢的可以点个赞哦。
Vue3实现计算器
weixin_74239807的博客
04-19 694
Vue3实现计算器
vue 之简易计算器
Pandora_417的博客
05-08 326
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> <script src="../../jQuery库/vue-2.4.0.js"></script> </head> &l...
Vue——简单计算器
WikY
11-19 3515
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="./vue.js"></
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值