欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-30 19:16:30
涉及知识: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]{....

涉及知识:

  1. HTML、CSS
  2. 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;
								
					}
				},
			}
		})

搭建骨架

  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>

预期结果:
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

相关标签: 前端小项目