vue实现计算机功能

上班无聊写个计算机玩玩

很智能的！！

 

<template>
<div>
  <div>
    <p>计算机</p>
    <span>您算什么呢</span>
   <ul v-if="show">
    <li v-for="(item,index) in Computers" :key="index" @click="Algorithm(index)">{{item.name}}</li>
   
   </ul>
   <div class="box" v-else>
    <input type="text" name="" id="" v-model="num">&nbsp;<span>{{symbol}}</span>&nbsp; <input type="text" name="" id="" v-model="num2"> = {{current}}
   </div>
   <button @click="back" v-if="show==false">返回</button>
  </div>
</div>
 
</template>

<script>
export default {
  name: 'Home',
  data (){
    return {
      count:0,
      num:'',
      num2:'',
      index:"",
      show:true,
      Computers:[{
        name:'+'
      },{
        name:'-'
      },{
        name:'×'
      },{
        name:'/'
      }]
    }
  },
  methods:{
    Algorithm(index){
      this.index=index
      this.show=false
    },
    back(){
      this.num=''
      this.num2=''
      this.show=true
    }
  },
  computed:{
    symbol(){
      if(this.index==0){
        return '+'
      } else if(this.index==1){
        return '-'
      }else if(this.index==2){
        return '×'
      }else if(this.index==3){
        return '/'
      }
    },
    current(){
      if(this.index==0){
        var number=Number(this.num) + Number(this.num2)
        return number
      } else if(this.index==1){
        var number=Number(this.num) - Number(this.num2)
        return number
      }else if(this.index==2){
       var number= Number(this.num) * Number(this.num2)
        return number
      }else if(this.index==3){
       var number= Number(this.num) / Number(this.num2)
        return number
      }else{
        return 0
      }
    }
  }

}
</script>
<style lang="less" scoped>
  li{
    list-style: none;
    width: 200px;
    height: 50px;
    margin: 0 auto;
    cursor:pointer;
    font-size: 29px;
  }
  ul{
    margin-top: 30px;
  }
  input{
    width: 50px;
    height: 30px;
  }
  button{
    margin-top: 40px;
    background: rgb(75, 214, 103);
    border: 0;
    width: 100px;
    color: white;
    height: 30px;
    border-radius: 5px;
  }
  .box{
    margin-top: 30px;
  }
</style>