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

程序员文章站 2022-08-17 09:12:48

涉及知识：HTML、CSSVue（v-for、v-model、v-on、v-clock）开发简易计算器目录目标代码sty.css：index.html:calcu.js:搭建骨架添加外观改用Vue框架完整代码使用测试目标代码sty.css：* {margin: 0;padding: 0;box-sizing: border-box; /*引入盒子模型*/}body {background-color: antiquewhite;}[v-cloak]{....

涉及知识：

HTML、CSS

Vue（v-for、v-model、v-on、v-clock）

目标

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

代码

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;
								
					}
				},
			}
		})

搭建骨架

计划制作五排四列的按键，用table表格搭建
在td标签中内嵌button按钮,显示框采用input标签的text样式
在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>

预期结果：
Vue框架入门---开发简易计算器

添加外观

* {
	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框架入门---开发简易计算器

改用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>

使用测试

使用鼠标计算得出结果：

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

输入错误会弹出ERROR

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

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

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

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

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

本文地址：https://blog.csdn.net/JKR10000/article/details/109356994

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

开发简易计算器目录

目标

代码

sty.css：

index.html:

calcu.js:

搭建骨架

添加外观

改用Vue框架

完整代码

使用测试

Python Web框架Flask下网站开发入门实例

.netCore+Vue 搭建的简捷开发框架（4）--NetCore 基础 -2

vue2.0开发实践总结之入门篇

国产PHP开发框架myqee新手快速入门教程

.netCore+Vue 搭建的简捷开发框架

[Vue 牛刀小试]：第十六章 - 针对传统后端开发人员的前端项目框架搭建

【分享】Vue 资源典藏（UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例）

【入门篇】前端框架Vue.js知识介绍

vue实现简易计算器

Python Web框架Flask下网站开发入门实例

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

开发简易计算器目录

目标

代码

sty.css：

index.html:

calcu.js:

搭建骨架

添加外观

改用Vue框架

完整代码

使用测试

Python Web框架Flask下网站开发入门实例

.netCore+Vue 搭建的简捷开发框架 （4）--NetCore 基础 -2

vue2.0开发实践总结之入门篇

国产PHP开发框架myqee新手快速入门教程

.netCore+Vue 搭建的简捷开发框架

[Vue 牛刀小试]：第十六章 - 针对传统后端开发人员的前端项目框架搭建

【分享】Vue 资源典藏（UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例）

【入门篇】前端框架Vue.js知识介绍

vue实现简易计算器

Python Web框架Flask下网站开发入门实例

.netCore+Vue 搭建的简捷开发框架（4）--NetCore 基础 -2