Vue实现计算器计算效果

本文实例为大家分享了Vue实现计算器计算效果的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <script src="../js/vue.js"></script>
 <title>compare</title>
 <style type="text/css">
 *{
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 }
 body{
 background-color: #000000;
 }
 .panle{
 border: 1px solid #5f5f5f;
 width: 100vw;
 height: 29vh;
 font-size: 3.8125rem;
 color: #FFFFFF;
 text-align: right;
 position: relative;
 }
 .curr{
 display: block;
 position: absolute;
 width: inherit;
 bottom: 0;
 font-size: 3.5rem;
 }
 .operation{
 display: block;
 position: absolute;
 width: inherit;
 bottom: 80px;
 font-size: 2.875rem;
 }
 .prev{
 font-size: 2.875rem;
 display: block;
 position: absolute;
 width: inherit;
 bottom: 8rem;
 }
 .keyboad{
 display: flex;
 flex-flow: row wrap;
 margin: 0 calc((8vw - 16px) / 2);
 }
 .key{
 display: inline-block;
 border: 1px solid #333;
 width: 23vw;
 height: 23vw;
 border-radius: 50%;
 text-align: center;
 font-size: 30px;
 line-height: 23vw;
 margin: 2px;
 background-color: #616161;
 color: #ffffff;
 cursor: pointer;
 outline: none;
 border: none;
 box-shadow: 0 9px #999;
 }
 .key:active {
 box-shadow: 0 5px #666;
 transform: translateY(4px);
 }
 .key:last-child{
 border-radius: 30%;
 flex-grow: 1;
 margin: 0;
 }
 .highlight{
 background-color: #e77919;
 }

 </style>
 </head>
 <body>
 <div id="app">
 <div class="panle">
 <span class="prev">{{prevNum}}</span>
 <span class="operation">{{operation}}</span>
 <span class="curr">{{currNum}}</span>
 </div>
 <div class="keyboad">
 <div class="key highlight" @click="clear">AC</div>
 <div class="key highlight" @click="back"><-</div>
 <div class="key highlight">#</div>
 <div class="key highlight" @click="except">/</div>
 <div class="key">7</div>
 <div class="key">8</div>
 <div class="key">9</div>
 <div class="key highlight" @click="ride">*</div>
 <div class="key">4</div>
 <div class="key">5</div>
 <div class="key">6</div>
 <div class="key highlight" @click="reduce">-</div>
 <div class="key">1</div>
 <div class="key">2</div>
 <div class="key">3</div>
 <div class="key highlight" @click="add">+</div>
 <div class="key">0</div>
 <div class="key">.</div>
 <div class="key highlight" @click="result">=</div>
 </div>
 </div>
 <script type="text/javascript">
 let vm = new Vue({
 el:"#app",
 data(){
 return{
 operation:'',
 prevNum:'',
 currNum:'',
 keyboard:[],
 arr:[],
 res:''
 }
 },
 mounted() {
 this.keyboard = document.querySelectorAll('div[class=key]');
 Array.from(this.keyboard, key => key.addEventListener('click',this.getVal))
 },
 methods:{
 getVal(e){
 this.currNum += e.target.innerHTML;
 this.arr.push(e.target.innerHTML);
 },
 clear(){
 this.prevNum = this.operation = this.currNum = '';
 },
 back(){
 this.arr.splice(-1,1)
 this.currNum = this.arr.join('')
 },
 add(){
 this.prevNum = this.currNum;
 this.currNum = '';
 this.operation = '+';
 },
 reduce(){
 this.prevNum = this.currNum;
 this.currNum = '';
 this.operation = '-';
 },
 ride(){
 this.prevNum = this.currNum;
 this.currNum = '';
 this.operation = '*';
 },
 except(){
 this.prevNum = this.currNum;
 this.currNum = '';
 this.operation = '/';
 },
 result(){
 switch(this.operation){
 case'+':
 this.res = Number(this.currNum) + Number(this.prevNum);
 break;
 case'-':
 this.res = Number(this.prevNum) - Number(this.currNum);
 break;
 case'*':
 this.res = Number(this.prevNum) * Number(this.currNum);
 break;
 case'/':
 this.res = Number(this.prevNum) / Number(this.currNum);
 break;
 }
 this.clear();
 this.currNum = this.res;
 this.arr = [];
 }
 }
 })
 </script>
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue实现计算器功能

    本文实例为大家分享了vue实现计算器功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> <script src="https://unpkg.com/vue/dist/vue.js"></script>

  • Vue实现简易计算器

    本文实例为大家分享了Vue实现简易计算器的具体代码,供大家参考,具体内容如下 <html> <body> <div id="demo"> <h2>简单加减乘除计算器</h2> <p>请输入第一个数:<input type="text" v-model="firNum"></p> <p>请输入第二个数:<input type="

  • vue.js实现简单的计算器功能

    使用vue.js来编写一个简单的计算器,供大家参考,具体内容如下 效果如图所示:是一个十分简单的计算器,包含了加减乘除,不是用原生js写的,而是用vue.js写的 html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"

  • Vue.js实现立体计算器

    本文实例为大家分享了Vue.js 制作立体计算器的具体方法,供大家参考,具体内容如下 项目效果图 这是一个简单的项目实现加减乘除运算 项目结构 代码展示 计算器1.0.html <!DOCTYPE html> <html> <head> <title>计算器</title> <link rel="stylesheet" type="text/css" href="css/style.css&

  • vue-model实现简易计算器

    本文实例为大家分享了vue-model实现简易计算器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me

  • vue.js实现的经典计算器/科学计算器功能示例

    本文实例讲述了vue.js实现的经典计算器/科学计算器功能.分享给大家供大家参考,具体如下: 1. HTML部分: <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <div id="app"> <div class="calculator"> <button @click="changeMod

  • Vue.js实现价格计算器功能

    本文实例为大家分享了Vue.js实现价格计算器功能的具体代码,供大家参考,具体内容如下 实现效果: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>价格计算器</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial

  • Vue实现简单计算器案例

    利用Vue.js写的一个简单的计算器.非常简单的案例. 通过这个案例,练习一下Vue的语法. 通过案例可以看出,Vue.js解放了DOM操作. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue计算器</title> </head> <body> <div id=&quo

  • Vue.js实现的计算器功能完整示例

    本文实例讲述了Vue.js实现的计算器功能.分享给大家供大家参考,具体如下: 1. HTML部分代码 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="css/css.css" rel="external nofollow" > <sc

  • Vue实现手机计算器

    本文实例为大家分享了Vue制作仿手机计算器的具体代码,供大家参考,具体内容如下 1.首先是把样式做出来,按钮是0-9,还有加减乘除,百分号,清除按钮,小数点,等号.等等 2.把官方网站的JS插件引用,cn.vuejs.org/v2/guide/ 页面视图 JS new Vue({ el: "#app", data: { equation: '0', isDecimalAdded: false, //防止在一组数字中间输入超过一个小数位 isOperatorAdded: false, /

  • 使用Vue实现简单计算器

    使用Vue编写简单计算器,供大家参考,具体内容如下 在Vue中,v-model 指令,可以实现表单元素和 Model 中数据的双向数据绑定,接下来,我们就用这个指令编写一个简单的计算器,代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src=&q

随机推荐