如何用vue做计算器功能

最新推荐文章于 2024-04-30 17:26:41 发布
最新推荐文章于 2024-04-30 17:26:41 发布
阅读量3.1k 收藏 1
点赞数 1
文章标签： vue vue数据驱动视图 vue计算器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lixiaoyan_star/article/details/88967429
版权

大家都知道vue是数据驱动视图的一个javascript框架，彻底解放dom操作，今天我们用vue做一个计算器的功能，会发现vue对于数据操作是非常好用的，下面是小案例。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="node_modules/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="number" v-model.number="num1"/>
			<select v-model.number="operater">
				<option value="0">+</option>
				<option value="1">-</option>
				<option value="2">*</option>
				<option value="3">/</option>
			</select>
			<input type="number" v-model.number="num2"/>
			<button @click="cal">=</button>
			<input type="number" v-model.number="res"/>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data(){
					return{
						num1:0,
						num2:0,
						operater:0,
						res:0

					}
				},
				methods:{
					cal(){
							switch(this.operater){
								case 0:
								this.res=this.num1+this.num2;
								break;
								case 1:
								this.res=this.num1-this.num2;
								break;
								case 2:
								this.res=this.num1*this.num2;
								break;
								case 3:
								this.res=this.num1/this.num2;
								break;
							}
					}
				}
			})
		</script>
	</body>
</html>
lixiaoyan_star
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用vue.js实现一款简易计算器可多则混合运算（加减乘除）
ciao1w35的博客
04-02 1482
通过methods中自定义方法，然后在input表单上通过v-model进行双向绑定，实现实时更新计算结果。
如何使用vue做一个简单的计算器
m0_68007258的博客
04-02 514
一个按钮，v-on:click绑定一个点击事件，点击后显示结果；3.最后，页面要有显示数字运算符效果，用{{属性}}实现一个属性的显示，则{{数字1}}{{运算符}}{{数字2}}={{结果}}实现一个四则运算的显示。3.函数实现方法，按钮绑定点击事件equal，函数具体内容就是通过if、 else if判断，判断条件根据运算符的不同，实现不同的运算的运算结果；4.监听器实现方法，监听输入的两个数字，第一个数字先存到结果里面，第二个数字根据运算符的不同，实现不同运算结果的存入；
Vue实现计算器（一看就懂）
Lycxiaobai的博客
02-23 5910
**这个计算器其实是我老师布置的一个作业，捉摸着搞了那么久的东西不能浪费了吧，于是我分享下我的代码和大概思路** 给个关注点个赞，后续我会分享更多我们学生党的作业问题 白嫖党们先看代码，我就先上上全代码，干！ <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>计算器</title> <!-- 引入Vue --> <script t
Vue3+Pinia 实现计数器案例（#仅学习）
最新发布
BelleLinQ的博客
04-30 810
Pinia+Vu3： State/Getter/action的使用
用VUE实现计算器四种方法
weixin_64688373的博客
04-02 4219
每当这些属性中的任何一个发生变化时，监视器函数将调用方法来重新计算结果，并更新数据属性中的值。函数中使用了一个switch语句，根据opt变量的不同值，分别执行加法、减法、乘法或除法，并将结果赋值给变量num3。2，计算属性根据选择的操作符将两个数字进行计算，并将结果返回给HTML中的输出元素。4.1，HTML代码不变，两个输入数值的输入框和输出元素的表单，一个基础的vue实例化。1，HTML代码定义了一个输入和输出元素，两个输入框，使用下拉框，选择运算符。三，使用方法（methods）实现简易的计算器。
【Vue实现简单的计算器】
weixin_64313784的博客
04-02 2365
vue使用三种方法实现一个简单的计算器
使用Vue三种方法实现简单计算器
2201_75939414的博客
04-02 3429
4:Vue.js使用@click指令绑定一个点击事件，并调用pd()方法，根据用户输入的数字和操作符计算结果，并将结果保存到result变量中。使用v-model指令将result变量的值绑定到结果显示输入框中，从而实现实时更新结果。代码实现了一个简单的计算器，用户可以在输入框中输入两个数字，选择一个操作符，并点击“等于”按钮，Vue.js会根据用户的输入进行计算，并将结果显示在另一个输入框中。2:methods属性中定义了一个方法pd()，用于根据用户的输入计算结果，并将结果保存到result变量中。
vue实现计算器功能
10-15
主要为大家详细介绍了vue实现计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue实现计算器计算效果
10-14
至此，一个基本的Vue计算器已经实现。这个计算器能够接收数字输入，执行加、减、乘、除等基本运算，并提供清除和退格功能。当然，实际应用中可能需要考虑更多细节，如错误处理、小数点输入、百分比计算等，但以上...
Vue.js实现的计算器功能完整示例
10-18
主要介绍了Vue.js实现的计算器功能,结合完整实例形式分析了vue.js响应鼠标事件实现基本的数值运算相关操作技巧,可实现四则运算及乘方、开方等功能,需要的朋友可以参考下
vue.js实现简单的计算器功能
10-15
在本教程中，我们将探讨如何使用 Vue.js 实现一个简单的计算器功能。 首先，让我们分析给定的 HTML 结构。在这个计算器应用中，有两个输入框（`和 `<input type="text" v-model="n2">`）用于输入数字，一个下拉选择...
使用Vue实现简单计算器
10-15
主要为大家详细介绍了使用Vue实现简单计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
VUE实现计算器
m0_73497479的博客
04-03 477
/ 监听 num1、num2 和 operator 变化，重新计算结果。// 根据 operator 执行相应的运算。-- 引入 Vue.js 库 -->-- 输入第一个数字 -->-- 输入第二个数字 -->-- 显示计算结果 -->-- 选择操作符 -->
VUE之简单计算器
m0_74913905的博客
05-06 488
今天分享两种方法实现简单计算器，使用者输入两个数字，点击按钮后，得出计算后的结果。
使用vue实现计算器
2301_77143733的博客
04-02 828
1.1在html中用div定义两个输入，使用两个v-model绑定输入的两个输入值，option实现下拉框，用来选择加减乘除，并用number改变输入值为数字类型。1.2添加按钮并设置点击事件。1.3写methods方法内容：使用switch语句，根据opt变量的不同会执行加减乘除中的一种，直接将结果给result。1.4效果图。
教你用Vue做一个简单网页计算器
热门推荐
qq_46556714的博客
10-16 1万+
二、案例描述 1、 考核知识点 2、 创建vue实例和对v-model内置指令的使用 3、 练习目标 创建vue实例。 掌握v-model内置指令的使用。 4、 需求分析 用户通过选择计算方法和数据输入，得到计算结果。 5、 案例分析 效果如图所示。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compat
VUE - 简易计算器
EstherNi的博客
07-09 224
VUE - 简易计算器
使用Vue.js开发计算器
DevCorner的Pro技术博客
06-01 492
至此，我们已经完成了一个使用Vue.js构建的计算器应用程序。这个简单的例子向我们展示了在Vue.js应用程序中如何使用数据绑定和计算属性、方法，以及if指令等概念。讲述的同时，我也借助MarkDown语法为您提供了清晰而简洁的代码解释与介绍。链接到GitHub上完整的项目源代码，如果感兴趣的话可以去研究一下，并亲手试验一下各种情况😉。
使用vue做简单的计算器
W_Nuyoah的博客
04-03 1688
1.2 定义一个id为app的盒子，盒子内放两个文本框，行内放一个placeholder属性提示文本框内容；分别用v-model属性进行双向绑定，方便后面的调用。3.监听器实现方法，监听输入的两个数字，第一个字数字先存到结果里面，第二个数字根据运算符的不同，实现不同运算结果的存入。1.3 声明一个对象，对象内规定作用范围、声明要使用的属性；函数方法和计算方法差不多，只不过函数方法需要使用绑定事件绑定在一个按钮上，点击才能实现函数效果。使用vue学三种简单的计算器。1.1先引入vue.js。
vue.js计算器功能代码
11-02
这里提供的是Vue.js实现的计算器功能代码，具体如下： HTML部分代码： ``` <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="css/css.css"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>Vue.js Calculator</title> </head> <body> <div id="app"> <div class="calculator"> <div class="display">{{ display }}</div> <div class="buttons"> <button v-for="button in buttons" v-on:click="addToDisplay(button)">{{ button }}</button> <button v-on:click="calculate()">=</button> <button v-on:click="clear()">C</button> </div> </div> </div> <script src="js/js.js"></script> </body> </html> ``` JavaScript部分代码： ``` var app = new Vue({ el: '#app', data: { display: '', buttons: ['7', '8', '9', '+', '4', '5', '6', '-', '1', '2', '3', '*', '0', '.', '/', '%'] }, methods: { addToDisplay: function(button) { this.display += button; }, calculate: function() { this.display = eval(this.display); }, clear: function() { this.display = ''; } } }); ``` 这个计算器功能使用了Vue.js框架，其中包括了HTML和JavaScript两部分代码。HTML部分定义了计算器的界面，JavaScript部分定义了计算器的逻辑。具体来说，JavaScript部分定义了三个方法：addToDisplay、calculate和clear，分别用于向显示器添加数字和运算符、计算表达式和清空显示器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值