Vue框架入门(一)---开发简易计算器

最新推荐文章于 2023-12-05 18:30:09 发布
最新推荐文章于 2023-12-05 18:30:09 发布
阅读量728 收藏 6
点赞数 1
分类专栏： 前端小项目 Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JKR10000/article/details/109356994
版权

涉及知识：

  1. HTML、CSS、JavaScript
  2. Vue（v-for、v-model、v-on、v-clock）

Gitee仓库 :https://gitee.com/vgtime123/Calculator

Gitee Pages：http://vgtime123.gitee.io/calculator

开发简易计算器目录

目标

在这里插入图片描述

代码

sty.css：

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box; /*引入盒子模型*/
}
body {
	background-color: antiquewhite;
}

[v-cloak]{
	display: none; /*解决渲染时的闪动问题*/
}

.calcu {
	width: 600px;
	height: 470px;
	margin: 100px auto;
    box-shadow:9px 9px 15px #c8c8c8 ; /*阴影浮动效果*/
	
}
.calcu-play {
	width: 100%;
	height: 120px;
	margin: 0 auto;
	font-size: 50px;
	background-color: pink;
	outline: none;
}
.calcu-key {
	height: 350px;
	width: 100%;
	text-align: center;
	
}
.calcu-key button {
	width: 100%;
	height: 100%;
	font-size: 30px;
	outline: none;
}
.calcu-key td {
	width: 50px;
}

index.html:

<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<link rel="stylesheet" type="text/css" href="css/sty.css"/>
</head>
<body>
	<!--计算器-->
	<div class="calcu" id="calculator" v-cloak>
		<input type="text" class="calcu-play" v-model="exp" @keydown="getkey">
			
		</input>
		<table class="calcu-key" border="0" cellspacing="0" cellpadding="0" >
			<tr v-for="item in arr" ><td v-for="it in item" ><button type="button" @click="getbtn($event)" >{{it}}</button> </td> </tr>
	<!--	
			<tr><td><button type="button" >(</button></td><td><button type="button" >)</button></td><td><button type="button"  >%</button></td><td><button type="button" >C</button></td></tr>
			<tr><td><button type="button" >7</button></td><td><button type="button" >8</button></td><td><button type="button"  >9</button></td><td><button type="button" >/</button></td></tr>
			<tr><td><button type="button" >4</button></td><td><button type="button" >5</button></td><td><button type="button"  >6</button></td><td><button type="button" >*</button></td></tr>
			<tr><td><button type="button" >1</button></td><td><button type="button" >2</button></td><td><button type="button"  >3</button></td><td><button type="button" >-</button></td></tr>
			<tr><td><button type="button" >0</button></td><td><button type="button" >.</button></td><td><button type="button"  >=</button></td><td><button type="button" >+</button></td></tr>
	-->	
		</table>
	</div>
	<!--引入脚本-->
	<script type="text/javascript" src="js/calcu.js"></script>
</body>
</html>

calcu.js:

var calculator = new Vue({
			el:"#calculator",
			data:{
				exp: "",
				arr:[
					["(", ")", "%", "C"],
					["7", "8", "9", "/"],
					["4", "5", "6", "*"],
					["1", "2", "3", "-"],
					["0", ".", "=", "+"],
				],
			},
			methods:{
				//键盘按下的触发的方法
				getkey:function(event) {
					
					switch(event.keyCode) {
						case 67: //C
							this.exp = '';
							event.preventDefault(); //阻止C字母输入到框中
							break;
						case 13: //enter
								var result = ''; 
								try{
									eval(this.exp+"");
								}catch(e){				
									result = "ERROR";
								}finally{
									this.exp =  result?result:(this.exp + " = "+ eval(this.exp+""));
								}break;
					}
				},
				//鼠标按下触发的方法
				getbtn:function(e) {
					switch(e.target.innerText) {
						case "C": 
							this.exp = '';break;
						case "=": 
								var result ;
								try{
									eval(this.exp+"");
								}catch(e){				
									result = "ERROR";
								}finally{
									this.exp =  result?result:(this.exp + " = "+ eval(this.exp+""));
								}break;
						default: 
								this.exp += e.target.innerText;
								break;
								
					}
				},
			}
		})

搭建骨架

  1. 计划制作五排四列的按键，用table表格搭建
  2. 在td标签中内嵌button按钮,显示框采用input标签的text样式
  3. 在button中嵌入符号
<div class="calcu" id="calculator" v-cloak>
		<input type="text" class="calcu-play" >	
		
		<table class="calcu-key" border="0" cellspacing="0" cellpadding="0"  >
			<tr><td><button type="button" >(</button></td><td><button type="button" >)</button></td><td><button type="button"  >%</button></td><td><button type="button" >C</button></td></tr>
			<tr><td><button type="button" >7</button></td><td><button type="button" >8</button></td><td><button type="button"  >9</button></td><td><button type="button" >/</button></td></tr>
			<tr><td><button type="button" >4</button></td><td><button type="button" >5</button></td><td><button type="button"  >6</button></td><td><button type="button" >*</button></td></tr>
			<tr><td><button type="button" >1</button></td><td><button type="button" >2</button></td><td><button type="button"  >3</button></td><td><button type="button" >-</button></td></tr>
			<tr><td><button type="button" >0</button></td><td><button type="button" >.</button></td><td><button type="button"  >=</button></td><td><button type="button" >+</button></td></tr>
	
		</table>
	</div>

预期结果：
在这里插入图片描述

添加外观

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box; /*引入盒子模型*/
}
body {
	background-color: antiquewhite; /* 背景颜色选择米黄色*/
}

.calcu {
	width: 600px;
	height: 470px;
	margin: 100px auto;
    box-shadow:9px 9px 15px #c8c8c8 ; /*阴影浮动效果*/
	
}
.calcu-play {			 /*input显示区*/
	width: 100%;
	height: 120px;
	margin: 0 auto;
	font-size: 50px;
	background-color: pink; /*显示区选择粉色*/
	outline: none;
}
.calcu-key {
	height: 350px;
	width: 100%;
	text-align: center; /*
	
}
.calcu-key button { 
	width: 100%;
	height: 100%;
	font-size: 30px;
	outline: none;
}
.calcu-key td {
	width: 50px;
}

在这里插入图片描述

改用Vue框架

1.引入Vue框架

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.声明Vue实例，采用二维数组的方式通过两层v-for渲染到页面中

var calculator = new Vue({
			el:"#calculator",
			data:{
				arr:[
					["(", ")", "%", "C"],
					["7", "8", "9", "/"],
					["4", "5", "6", "*"],
					["1", "2", "3", "-"],
					["0", ".", "=", "+"],
				]
			}
	})

3 .鼠标点击按钮触发getbtn方法

 
			<tr v-for="item in arr" ><td v-for="it in item" ><button type="button" @click="getbtn($event)" >{{it}}</button> </td> </tr>
	<!--	
			<tr><td><button type="button" >(</button></td><td><button type="button" >)</button></td><td><button type="button"  >%</button></td><td><button type="button" >C</button></td></tr>
			<tr><td><button type="button" >7</button></td><td><button type="button" >8</button></td><td><button type="button"  >9</button></td><td><button type="button" >/</button></td></tr>
			<tr><td><button type="button" >4</button></td><td><button type="button" >5</button></td><td><button type="button"  >6</button></td><td><button type="button" >*</button></td></tr>
			<tr><td><button type="button" >1</button></td><td><button type="button" >2</button></td><td><button type="button"  >3</button></td><td><button type="button" >-</button></td></tr>
			<tr><td><button type="button" >0</button></td><td><button type="button" >.</button></td><td><button type="button"  >=</button></td><td><button type="button" >+</button></td></tr>
	-->

4.优化input，使之通过键盘按下触发getkey也能输入信息计算

<input type="text" class="calcu-play"  v-model="exp" @keydown="getkey">

5.js

var calculator = new Vue({
			el:"#calculator",
			data:{
				exp: "", //显示框表达式
				arr:[
					["(", ")", "%", "C"],
					["7", "8", "9", "/"],
					["4", "5", "6", "*"],
					["1", "2", "3", "-"],
					["0", ".", "=", "+"],
				],
			},
			methods:{
				//键盘按下的触发的方法
				getkey:function(event) {
					
					switch(event.keyCode) {
						case 67: //C
							this.exp = '';
							event.preventDefault(); //阻止C字母输入到框中
							break;
						case 13: //enter
								var result = ''; 
								try{
									eval(this.exp+""); //为简化计算过程，采用eval函数让系统计算过程，如若表达式错误，则抛出ERROR
								}catch(e){				
									result = "ERROR";
								}finally{
									this.exp =  result?result:(this.exp + " = "+ eval(this.exp+""));
								}break;
					}
				},
				//鼠标按下触发的方法
				getbtn:function(e) {
					switch(e.target.innerText) {
						case "C": 
							this.exp = '';break;
						case "=": 
								var result ;
								try{
									eval(this.exp+""); //为简化计算过程，采用eval函数让系统计算过程，如若表达式错误，则抛出ERROR
								}catch(e){				
									result = "ERROR";
								}finally{
									this.exp =  result?result:(this.exp + " = "+ eval(this.exp+""));
								}break;
						default: 
								this.exp += e.target.innerText;
								break;
								
					}
				},
			}
		})

完整代码

<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 	
	<link rel="stylesheet" type="text/css" href="css/sty.css"/>
 -->	
		<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		body {
			background-color: antiquewhite;
		}
		
		[v-cloak]{  /*解决渲染时的闪动问题*/
			display: none;
		}
		
		.calcu {
			width: 600px;
			height: 470px;
			margin: 100px auto;
		    box-shadow:9px 9px 15px #c8c8c8 ;
			
		}
		.calcu-play {
			width: 100%;
			height: 120px;
			margin: 0 auto;
			font-size: 50px;
			background-color: pink;
			outline: none;
		}
		.calcu-key {
			height: 350px;
			width: 100%;
			text-align: center;
			align-items: center;
		}
		.calcu-key button {
			width: 100%;
			height: 100%;
			font-size: 30px;
			outline: none;
		}
		.calcu-key td {
			width: 50px;
		}
	</style>
</head>
<body>
	<!--计算器-->
	<div class="calcu" id="calculator" v-cloak >
			<input type="text" class="calcu-play"  v-model="exp" @keydown="getkey">	
			
			
			<table class="calcu-key" border="0" cellspacing="0" cellpadding="0"  >
			<tr v-for="item in arr" >
				<td v-for="it in item" >
					<button type="button" @click="getbtn($event)" >{{it}}</button>
				</td> 
			</tr>
				
			</table>
		</div>
		<script type="text/javascript">
			var calculator = new Vue({
						el:"#calculator",
						data:{
							exp: "",
							arr:[
								["(", ")", "%", "C"],
								["7", "8", "9", "/"],
								["4", "5", "6", "*"],
								["1", "2", "3", "-"],
								["0", ".", "=", "+"],
							],
						},
						methods:{
							//键盘按下的触发的方法
							getkey:function(event) {
								
								switch(event.keyCode) {
									case 67: //C
										this.exp = '';
										event.preventDefault(); //阻止C字母输入到框中
										break;
									case 13: //enter
											var result = ''; 
											try{
												eval(this.exp+"");
											}catch(e){				
												result = "ERROR";
											}finally{
												this.exp =  result?result:(this.exp + " = "+ eval(this.exp+""));
											}break;
								}
							},
							//鼠标按下触发的方法
							getbtn:function(e) {
								switch(e.target.innerText) {
									case "C": 
										this.exp = '';break;
									case "=": 
											var result ;
											try{
												eval(this.exp+"");
											}catch(e){				
												result = "ERROR";
											}finally{
												this.exp =  result?result:(this.exp + " = "+ eval(this.exp+""));
											}break;
									default: 
											this.exp += e.target.innerText;
											break;
											
								}
							},
						}
					})
		</script>
<!-- 	
	<script type="text/javascript" src="js/calcu.js"></script>
 -->	
</body>
</html>

使用测试

使用鼠标计算得出结果：

在这里插入图片描述

输入错误会弹出ERROR

在这里插入图片描述

使用键盘计算，有效数字0~9，按下回车计算，按下c键为重置

在这里插入图片描述

如若中间输入有误可以通过光标修改

在这里插入图片描述

VGtime
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue实现 简易计算器的四种方法
m0_70471387的博客
04-02 466
结果：{{number1-number2}}</p><p v-if="opt=='*'">结果：{{number1*number2}}</p><p v-if="opt=='/'">结果：{{number1/number2}}
使用Vue.js及Element编写的精度浮点运算计算器源码（打开运行）
12-16
主要是Vue的一些简单应用，难点在于浮点运算。由于javascript的浮点运算是不精确的（对于大多数编程语言都是这样），此程序使用整数来代替浮点数进行运算，最后再转化为浮点数，可以实现对设置范围内（运算范围在程序中为自定义变量range）的浮点运算实现精度运算。
Vue实现简单——计数器
weixin_62128198的博客
11-16 1372
vue实现计数器
vue制作优雅的拟态化微立体计算器
你好呀，很高兴你在看这里~
07-20 1571
一.话不多，先看效果：  这个效果是我在b站看到一个up写的，感觉拟态化微立体效果很简约却又有种优雅的感觉。????而优雅又怎么能缺了我， <(￣︶￣)> ，所以话不多说，自己马上也整了一个，实现并不难，超详细的制作过程如下（最后附上完整代码）： 二.超级详细的制作过程： 1.首先自然是定义html标签（先别理标签里的vue语法），我定义一个父盒子.calculator，然后定义一个span标签放计算结果，其它按钮都用button标签包裹。计算器的布局采用grid布局，所以在每个按钮里绑定属性
html实现计算器
zmk0820的博客
03-24 4497
html实现计算器
基于Vue框架的element-ui离线文档
07-19
离线的element-ui文档，使用更快，前端基于Vue框架更快的编写前端页面，大量简化开发时间，而且更容易上手
vue-element-admin框架源代码
09-10
vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助...
vue-mini-weather:基于Vue开发的迷你实时天气预报组件
05-14
基于Vue框架开发的一款迷你天气预报展示的小组件，目前只支持中国大陆的天气预报，原因在更新公告中有，有问题请提 :package: 安装 2021.04.24 因为刚上传到npm仓库没多久，可能其他镜像库还没有镜像过去，所以要...
VUE3+Element-Plus入门代码
12-27
VueDemo_boot为前端代码，api为后端代码
Vue开发-实用vue实现简易计算器项目.zip
最新发布
05-09
Vue开发_实用vue实现简易计算器项目
HTML程序大全(1)：简易计算器
joe_g12345的博客
12-05 2554
这是一个简单的计算器，使用HTML、CSS和JavaScript实现。HTML代码创建了一个计算器的界面，CSS代码设置了计算器的样式，JavaScript代码实现了计算器的功能。这个计算器可以执行加、减、乘、除和取模运算。同时，它还支持小数点和多位数运算。
【Vue实现简单的计算器】
weixin_64313784的博客
04-02 2307
vue使用三种方法实现一个简单的计算器
vue实现简易计算器，vue基础
zm8454的博客
07-26 2874
这样使用vue就可以实现简单的计算器啦，赶快试试吧！觉得好玩，喜欢的可以点个赞哦。
Vue实现简单计算器
Mpnet的博客
09-06 1140
数据： 1.一个one变量保存第一个值 2.一个two变量保存第二值 3.一个str变量用于记录用户点击过的键 4.一个run变量记录运算类型 5.一个sum变量记录运算最终值 方法： 1.一个接受用户点击过的字符的方法，并将点击过的字符放在str中，该值要一直显示再文本框中直到结果出现，最后一个=直接调用计算方法 2.将str中的字符串分割，使得前值赋给one变量，后值赋给two变量，运算类型赋值给run。注意是字符串转换为数字型，除了运算符。 3.一个根据运算类型执行对应运算的方法，并将结果显示
vue可以直接进行运算么_Vue实现手机计算器
weixin_30825389的博客
12-31 321
本文实例为大家分享了Vue制作仿手机计算器的具体代码，供大家参考，具体内容如下1.首先是把样式做出来，按钮是0-9，还有加减乘除，百分号，清除按钮，小数点，等号、等等页面视图JSnew Vue({el: "#app",data: {equation: '0',isDecimalAdded: false, //防止在一组数字中间输入超过一个小数位isOperatorAdded: false, //判...
【前端】Vue.js实现简单价格计算器
weixin_30487201的博客
08-23 449
价格计算器 实现效果： 实现代码及注释： <!DOCTYPE html> <html> <head> <title>价格计算器</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-widt...
HTML制作计算器（一）
baidu_27670713的博客
07-30 3215
计算器的按键布局简单，功能的实现需要JavaScript脚本，作为熟悉HTML编程的上手项目还是不错的。本项目目标是做出漂亮的界面，实现加减乘除功能，有一个输入框，一个结果输出框。利用HTML将页面元素拼凑如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>计算器</title> </head> <body>
画一个vue-admin-templeate开发视图
06-12
Vue-Admin-Template 是一个基于 Vue.js 和 Element UI 的后台管理系统模板，主要用于开发企业级的后台管理系统。以下是 Vue-Admin-Template 的基本开发视图： 1. 组件结构：Vue-Admin-Template 的组件结构非常清晰，主要包括布局组件、业务组件、通用组件和工具组件。其中，布局组件包括头部、侧边栏、主体等组件；业务组件包括各种业务模块的组件，如用户管理、订单管理等；通用组件包括表单、表格、图表等常用组件；工具组件包括各种工具类组件，如菜单生成器、权限管理器等。 2. 组件交互：Vue-Admin-Template 的组件之间通过 props 和事件进行交互。父组件通过 props 把数据传递给子组件，子组件通过事件向父组件发送消息。此外，Vue-Admin-Template 也通过 Vuex 实现组件之间的数据共享。 3. 路由配置：Vue-Admin-Template 的路由配置非常灵活，可以通过配置文件或接口动态生成路由。路由配置文件主要包括路由路径、组件名称、路由名称、路由元信息等。 4. 数据交互：Vue-Admin-Template 的数据交互采用了 Axios 库进行封装，可以轻松地进行 API 请求和响应处理。 5. 状态管理：Vue-Admin-Template 采用了 Vuex 进行状态管理，可以方便地进行状态管理和数据共享。 总之，Vue-Admin-Template 的开发视图非常清晰，组件结构、组件交互、路由配置、数据交互和状态管理都非常规范和易于理解。这为开发者提供了一个良好的开发框架，可以快速开发出高质量的后台管理系统。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值