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]{....
涉及知识:
- HTML、CSS
- Vue(v-for、v-model、v-on、v-clock)
目标
代码
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>
预期结果:
添加外观
* {
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键为重置
如若中间输入有误可以通过光标修改
本文地址:https://blog.csdn.net/JKR10000/article/details/109356994
下一篇: 使用Echarts实现动态柱状图