vue手写一个计算器

最新推荐文章于 2023-10-13 11:57:11 发布
最新推荐文章于 2023-10-13 11:57:11 发布
阅读量2.3w 收藏 7
点赞数 2
分类专栏： vue js 文章标签： vue.js css 前端 vue手写一个计算器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52703987/article/details/129931051
版权
vue 同时被 2 个专栏收录
5 篇文章 0 订阅
订阅专栏
js
2 篇文章 0 订阅
订阅专栏

计算器大家都不陌生 有计算器机器 有手机计算器 网页计算器!

在这里插入图片描述

那么好 今天我来给大家手写一个计算器

啥都不说上操作 请听题：vue手写计算器

一个个小方块拼成一个计算器  绿色比较好  可以缓解视力哦

index页面布局

<div class="calculator">
		<div class="screen">{{ display }}</div>
		<div class="buttons">
			<div class="button" @click="clear">C</div>
			<div class="button" @click="negate">+/-</div>
			<div class="button" @click="operation('%')">%</div>
			<div class="button operation" @click="operation('/')">÷</div>
			<div class="button" @click="append('7')">7</div>
			<div class="button" @click="append('8')">8</div>
			<div class="button" @click="append('9')">9</div>
			<div class="button operation" @click="operation('*')">x</div>
			<div class="button" @click="append('4')">4</div>
			<div class="button" @click="append('5')">5</div>
			<div class="button" @click="append('6')">6</div>
			<div class="button operation" @click="operation('-')">-</div>
			<div class="button" @click="append('1')">1</div>
			<div class="button" @click="append('2')">2</div>
			<div class="button" @click="append('3')">3</div>
			<div class="button operation" @click="operation('+')">+</div>
			<div class="button" @click="append('0')">0</div>
			<div class="button" @click="append('.')">.</div>
			<div class="button equals" @click="equals">=</div>
		</div>
	</div>

css样式

<style>
.calculator {
	margin-left: 900px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 380px;
	height: 700px;
	padding: 50px;
	/* background-color: #fff; */
	border-radius: 10px;
	/* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); */
	border: 1px solid red;
	font-family: Arial, sans-serif;
}
.screen {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	height: 100px;
	font-size: 40px;
	font-weight: bold;
	padding: 0 20px;
	background-color: #f5f5f5;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	box-shadow: inset 0 -2px rgba(0, 0, 0, 0.1);
}
.buttons {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 10px;
	width: 100%;
	height: 320px;
	padding: 10px;
}
.button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 80px;
	font-size: 30px;
	font-weight: bold;
	color: #fff;
	background-color: #4caf50;
	border-radius: 5px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	user-select: none;
	transition: background-color 0.2s, box-shadow 0.2s;
}
.button:hover {
	background-color: #4a8f4e;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.button:active {
	background-color: #3f7c42;
	box-shadow: none;
}
.operation {
	background-color: #2196f3;
}
.equals {
	background-color: #ff9800;
}
.equals:hover {
	background-color: #ef8800;
}
</style>

JS逻辑

  <script>
export default {
	data() {
		return {
			display: '0',
			operator: null,
			operand1: null,
			operand2: null,
			result: null,
			decimal: false,
		};
	},
	methods: {
		append(char) {
			if (this.display === '0') {
				this.display = char;
			} else {
				this.display += char;
			}
		},
		clear() {
			this.display = '0';
			this.operator = null;
			this.operand1 = null;
			this.operand2 = null;
			this.result = null;
			this.decimal = false;
		},
		negate() {
			if (this.display !== '0' && this.display !== '-') {
				this.display = (parseFloat(this.display) * -1).toString();
			}
		},
		operation(operator) {
			if (this.operand1 === null) {
				this.operand1 = parseFloat(this.display);
				this.operator = operator;
				this.display = '0';
				this.decimal = false;
			} else {
				this.operand2 = parseFloat(this.display);
				this.calculate();
				this.operator = operator;
				this.operand1 = this.result;
				this.operand2 = null;
				this.display = '0';
				this.decimal = false;
			}
		},
		calculate() {
			switch (this.operator) {
				case '+':
					this.result = this.operand1 + this.operand2;
					break;
				case '-':
					this.result = this.operand1 - this.operand2;
					break;
				case '*':
					this.result = this.operand1 * this.operand2;
					break;
				case '/':
					this.result = this.operand1 / this.operand2;
					break;
				case '%':
					this.result = this.operand1 % this.operand2;
					break;
			}
		},
		equals() {
			if (this.operand1 !== null && this.operand2 === null) {
				this.operand2 = parseFloat(this.display);
				this.calculate();
				this.display = this.result.toString();
				this.operand1 = null;
				this.operand2 = null;
				this.operator = null;
				this.decimal = false;
			}
		},
	},
	watch: {
		display(val) {
			if (val.indexOf('.') !== -1) {
				this.decimal = true;
			} else {
				this.decimal = false;
			}
		},
	},
};
</script>

考虑到很多小同学是新手 我直接给你展示源码 复制粘贴就能使用 仅需一步操作就好！一次就好~

<template>
	<div class="calculator">
		<div class="screen">{{ display }}</div>
		<div class="buttons">
			<div class="button" @click="clear">C</div>
			<div class="button" @click="negate">+/-</div>
			<div class="button" @click="operation('%')">%</div>
			<div class="button operation" @click="operation('/')">÷</div>
			<div class="button" @click="append('7')">7</div>
			<div class="button" @click="append('8')">8</div>
			<div class="button" @click="append('9')">9</div>
			<div class="button operation" @click="operation('*')">x</div>
			<div class="button" @click="append('4')">4</div>
			<div class="button" @click="append('5')">5</div>
			<div class="button" @click="append('6')">6</div>
			<div class="button operation" @click="operation('-')">-</div>
			<div class="button" @click="append('1')">1</div>
			<div class="button" @click="append('2')">2</div>
			<div class="button" @click="append('3')">3</div>
			<div class="button operation" @click="operation('+')">+</div>
			<div class="button" @click="append('0')">0</div>
			<div class="button" @click="append('.')">.</div>
			<div class="button equals" @click="equals">=</div>
		</div>
	</div>
</template>
  <script>
export default {
	data() {
		return {
			display: '0',
			operator: null,
			operand1: null,
			operand2: null,
			result: null,
			decimal: false,
		};
	},
	methods: {
		append(char) {
			if (this.display === '0') {
				this.display = char;
			} else {
				this.display += char;
			}
		},
		clear() {
			this.display = '0';
			this.operator = null;
			this.operand1 = null;
			this.operand2 = null;
			this.result = null;
			this.decimal = false;
		},
		negate() {
			if (this.display !== '0' && this.display !== '-') {
				this.display = (parseFloat(this.display) * -1).toString();
			}
		},
		operation(operator) {
			if (this.operand1 === null) {
				this.operand1 = parseFloat(this.display);
				this.operator = operator;
				this.display = '0';
				this.decimal = false;
			} else {
				this.operand2 = parseFloat(this.display);
				this.calculate();
				this.operator = operator;
				this.operand1 = this.result;
				this.operand2 = null;
				this.display = '0';
				this.decimal = false;
			}
		},
		calculate() {
			switch (this.operator) {
				case '+':
					this.result = this.operand1 + this.operand2;
					break;
				case '-':
					this.result = this.operand1 - this.operand2;
					break;
				case '*':
					this.result = this.operand1 * this.operand2;
					break;
				case '/':
					this.result = this.operand1 / this.operand2;
					break;
				case '%':
					this.result = this.operand1 % this.operand2;
					break;
			}
		},
		equals() {
			if (this.operand1 !== null && this.operand2 === null) {
				this.operand2 = parseFloat(this.display);
				this.calculate();
				this.display = this.result.toString();
				this.operand1 = null;
				this.operand2 = null;
				this.operator = null;
				this.decimal = false;
			}
		},
	},
	watch: {
		display(val) {
			if (val.indexOf('.') !== -1) {
				this.decimal = true;
			} else {
				this.decimal = false;
			}
		},
	},
};
</script>
  <style>
.calculator {
	margin-left: 900px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 380px;
	height: 700px;
	padding: 50px;
	/* background-color: #fff; */
	border-radius: 10px;
	/* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); */
	border: 1px solid red;
	font-family: Arial, sans-serif;
}
.screen {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	height: 100px;
	font-size: 40px;
	font-weight: bold;
	padding: 0 20px;
	background-color: #f5f5f5;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	box-shadow: inset 0 -2px rgba(0, 0, 0, 0.1);
}
.buttons {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 10px;
	width: 100%;
	height: 320px;
	padding: 10px;
}
.button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 80px;
	font-size: 30px;
	font-weight: bold;
	color: #fff;
	background-color: #4caf50;
	border-radius: 5px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	user-select: none;
	transition: background-color 0.2s, box-shadow 0.2s;
}
.button:hover {
	background-color: #4a8f4e;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.button:active {
	background-color: #3f7c42;
	box-shadow: none;
}
.operation {
	background-color: #2196f3;
}
.equals {
	background-color: #ff9800;
}
.equals:hover {
	background-color: #ef8800;
}
</style>

大功告成
在这里插入图片描述
有需要的小伙伴直接可以拿去用了 不谢不谢下次再见!

在这里插入图片描述

行动很重要冲冲冲
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
作业：使用Vue做一个简单计算器
2303_77163732的博客
04-04 145
作业：使用Vue做一个简单计算器
vue 做的计算器
Jackson_ji的博客
06-11 2256
1.首先你的下载vue.js和vuex.js（ vuex.js下载地址：https://github.com/jilifeng/vuex.text.git）2.然后你的对vuex 有一定的的了解（store ,mutations ,getters）我也只知道这些。哈哈3.还有组件写这个的逻辑都在下面，一步步都标记清楚了（就是怕忘哈哈，因为我也是个渣渣）&lt;!DOCTYPE html&gt; &...
javascript从0到0.9手写一个windows计算器
xingyu_qie的专栏
11-09 1835
说实话，最初想用javascript模拟着windows的计算器写一个的时候，感觉也就是10分钟搞定，但写着写着发现，其实并不是那么容易的事，window的这个计算器逻辑挺多的。而且还想给别人把这个思路说出来，那就更加的不容易了。如果能够帮到一些人，那将会是我莫大的欣慰。
vue2/vue实现简易计算器/计算器样式
six6de6的博客
09-23 969
vue2/vue实现简易计算器/计算器样式
Vue + Springboot实现基础计算器和利率计算器
最新发布
m0_74545832的博客
10-13 511
Vue+Springboot的技术有点大材小用了,可能有点繁琐,但是只会这些了,通过这次项目,我学到了做项目前不能着急要先想好自己的思路,否则很容易在写代码的时候出现高耦合度的代码,导致一处改,处处改的问题,Vue是新学的有所收获同时也知道了Element-UI组件库,让后端程序员也能有稍微精美一些的界面,也学到了axios是ajax请求的封装,发送请求更加方便,但中间出现了跨域问题,查询资料也是很好地解决,由于贷款的时长是一个区间,所以用大于等于来判断,从而找到区间范围内的利率。
使用Vue三种方法实现简单计算器
2201_75939414的博客
04-02 3438
4:Vue.js使用@click指令绑定一个点击事件，并调用pd()方法，根据用户输入的数字和操作符计算结果，并将结果保存到result变量中。使用v-model指令将result变量的值绑定到结果显示输入框中，从而实现实时更新结果。代码实现了一个简单的计算器，用户可以在输入框中输入两个数字，选择一个操作符，并点击“等于”按钮，Vue.js会根据用户的输入进行计算，并将结果显示在另一个输入框中。2:methods属性中定义了一个方法pd()，用于根据用户的输入计算结果，并将结果保存到result变量中。
一个基于vue的简易计算器
12-29
在本项目中，我们探讨的是一个使用Vue.js框架构建的简单计算器应用。Vue.js是一个轻量级的前端JavaScript框架，以其易学易用、组件化开发和灵活性著称。这个项目将展示如何利用HTML、CSS和JavaScript（尤其是Vue.js...
vue手写一个自定义操作的工作流
06-15
在Vue.js框架中，手写一个自定义操作的工作流是一项挑战性的任务，但它能让你更好地理解和控制工作流的每一个细节。下面将详细讲解这个过程涉及的关键知识点。 首先，我们需要了解`Vue`的基础知识。Vue.js是一款轻...
vue小组件 计算器小工具
02-09
vue小组件 计算器小工具
基于vue手写tree插件的那点事儿
10-16
主要给大家介绍了基于vue手写tree插件的那点事儿，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
手写计算器My Script Calculator_1.0.1
02-19
手写计算器My Script Calculator_1.0.1
Vue实现手机计算器
10-14
主要为大家详细介绍了Vue实现手机计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现计算器功能
12-28
本文实例为大家分享了vue实现计算器功能的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>计算器</title> [removed][removed] </head> <body> <input type=text v-model=n1> <select v-model=opt> +</option
Vue实现简易计算器
10-15
在本文中，我们将深入探讨如何使用Vue.js框架来创建一个简单的加减乘除计算器。Vue.js是一个轻量级的前端JavaScript框架，它以其组件化、响应式数据绑定和易用性而闻名。以下是对实现这个简易计算器的关键知识点的...
Vue实现计算器（一看就懂）
Lycxiaobai的博客
02-23 5914
**这个计算器其实是我老师布置的一个作业，捉摸着搞了那么久的东西不能浪费了吧，于是我分享下我的代码和大概思路** 给个关注点个赞，后续我会分享更多我们学生党的作业问题 白嫖党们先看代码，我就先上上全代码，干！ <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>计算器</title> <!-- 引入Vue --> <script t
vue制作优雅的拟态化微立体计算器
你好呀，很高兴你在看这里~
07-20 1604
一.话不多，先看效果：  这个效果是我在b站看到一个up写的，感觉拟态化微立体效果很简约却又有种优雅的感觉。????而优雅又怎么能缺了我， <(￣︶￣)> ，所以话不多说，自己马上也整了一个，实现并不难，超详细的制作过程如下（最后附上完整代码）： 二.超级详细的制作过程： 1.首先自然是定义html标签（先别理标签里的vue语法），我定义一个父盒子.calculator，然后定义一个span标签放计算结果，其它按钮都用button标签包裹。计算器的布局采用grid布局，所以在每个按钮里绑定属性
使用前端写计算器
qq_45624685的博客
07-06 296
计算器 如下图 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>单击和双击事件</title> </head> <body> <form action="#"> <input type="text">+ <input type="text"> <inpu
android手写计算器,MyScript Calculator(高级手写计算器) V1.2.2.479 安卓版
weixin_42549723的博客
05-30 3374
MyScript Calculator是款手写计算器，它能在手机上直接进行数值手写，并实时计算出结果，如同写在纸上的感觉一样，更支持随意涂抹修改功能，非常方便好用。【软件功能】1、一款能通过手写来进行数字，符号，算法输入的计算器，十分强大的计算风格，只需要把你想要计算的题目或者公式手写到屏幕上，就会出现你想要的答案，使用起来非常方便、简单、直观，只需在屏幕上写出数学表达式，然后让MyScript ...
使用vue编写一个计算器
09-23
使用Vue编写一个计算器可以按照以下步骤进行： 1. 在HTML中引入Vue库。 2. 创建一个div元素作为Vue实例的根元素，给其添加一个id属性。 3. 在Vue实例中使用data属性来定义计算器中的数字和运算符的初始值。 4. 在HTML中使用v-model指令将输入框与Vue实例的数据进行双向绑定。 5. 使用select元素和option元素创建一个下拉菜单，用于选择运算符。 6. 使用v-if指令根据选择的运算符显示不同的结果。 7. 在Vue实例中使用methods属性来定义处理计算的方法。 8. 在Vue实例之后的script标签中实例化Vue实例。 以下是一个使用Vue编写的计算器的示例代码： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue Calculator</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <input type="text" v-model.number="num1"> <select v-model="operator"> <option></option> <option>-</option> <option>*</option> <option>/</option> </select> <input type="text" v-model.number="num2"> <br> <div> <p v-if="operator == ' ' ">结果：{{ num1 + num2 }}</p> <p v-if="operator == '-'">结果：{{ num1 - num2 }}</p> <p v-if="operator == '*'">结果：{{ num1 * num2 }}</p> <p v-if="operator == '/'">结果：{{ num1 / num2 }}</p> </div> </div> <script type="text/javascript"> var vm = new Vue({ el: "#app", data: { num1: 0, num2: 0, operator: "*" } }); </script> </body> </html> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值