Vue.js实现的计算器功能完整示例
(编辑：jimmy 日期: 2024/11/18 浏览：3 次 )
本文实例讲述了Vue.js实现的计算器功能。分享给大家供大家参考，具体如下：
1. HTML部分代码
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="css/css.css" rel="external nofollow" > <script type="text/javascript" src="/UploadFiles/2021-04-02/vue.min.js">2. CSS部分代码
@charset "utf-8"; body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input{margin:0;padding:0;-webkit-text-size-adjust:none} h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal} body>div{margin:0 auto} div{text-align:left} a img{border:0} body{color:#333;text-align:center;font:12px "微软雅黑";} ul, ol, li{list-style-type:none;vertical-align:0} a{outline-style:none;color:#535353;text-decoration:none} a:hover{color:#D40000;text-decoration:none} .clear{height:0;overflow:hidden;clear:both} /* calculator */ #calculator{width:200px;height:245px;padding:10px;border:1px solid #e5e5e5;background:#f8f8f8;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;box-shadow:0px 0px 10px #f2f2f2;-moz-box-shadow:0px 0px 10px #f2f2f2;-webkit-box-shadow:0px 0px 10px #f2f2f2;margin:40px auto 0 auto;} #calculator #input-box{margin:0;width:187px;padding:9px 5px;height:14px;border:1px solid #e5e5e5;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;background:#FFF;text-align:right;line-height:14px;font-size:12px;font-family:Verdana, Geneva, sans-serif;color:#666;outline:none; text-transform:uppercase;} #calculator #btn-list{width:200px;overflow:hidden;} #calculator #btn-list .btn-radius{border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;border:1px solid #e5e5e5;background:-webkit-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#ebebeb));background:-moz-linear-gradient(top, #f7f7f7,#ebebeb);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f7f7f7,endColorstr=#ebebeb,grandientType=1);line-height:29px;text-align:center;text-shadow:0px 1px 1px #FFF;font-weight:bold;font-family:Verdana, Geneva, sans-serif;color:#666;float:left;margin-left:11px;margin-top:11px;font-size:12px;cursor:pointer;} #calculator #btn-list .btn-radius:active{background:#ffffff;} #calculator #btn-list .clear-marginleft{margin-left:0;} #calculator #btn-list .font-14{font-size:14px;} #calculator #btn-list .color-red{color:#ff5050} #calculator #btn-list .color-blue{color:#00b4ff} #calculator #btn-list .btn-30{width:29px;height:29px;} #calculator #btn-list .btn-70{width:70px;height:29px;}3. 使用本站HTML/CSS/JS在线运行测试工具：http://tools.jb51.net/code/HtmlJsRun，可得到如下测试运行效果：
4. 使用时记得改下css路径,在html中引入vue
5. 博主技术有限,正负号部分功能还有问题待完善.计算器还有一些未知的小Bug,感兴趣的读者可以在这个基础上进行扩展。
PS：这里再为大家推荐几款计算工具供大家参考：
在线数学表达式简单转换/计算工具：
http://tools.jb51.net/jisuanqi/exp_jisuanqi在线一元函数（方程）求解计算工具：
http://tools.jb51.net/jisuanqi/equ_jisuanqi科学计算器在线使用_高级计算器在线计算：
http://tools.jb51.net/jisuanqi/jsqkexue在线计算器_标准计算器：
http://tools.jb51.net/jisuanqi/jsq希望本文所述对大家vue.js程序设计有所帮助。
下一篇：JavaScript类的继承方法小结【组合继承分析】