Vue练习二十五：03_07_网页计算器

Demo 在线地址：
https://sx00xs.github.io/test/25/index.html
---------------------------------------------------------------
ide: vscode
文件格式：.vue
解析：（待补）

<template>
  <div id=app>
    <div class=calc>
      <p>By - Ferris QQ:21314130</p>
      <input class=f-text type=text readonly maxlength=9 v-model=num1>
      <ul>
        <li v-for="item in lists" :key="item.val" :class="item.cla">
          <a :href=item.href
          @focus="handleFocus"
          @click="handleClick(item.val)"
          >{{item.val}}</a>
        </li>
        
      </ul>
      <input class="formula" type="text" readonly v-model="num2">
    </div>
  </div>
</template>
<script>
export default {
  data:function(){
    return{
      num1:0,
      num2:'',
      s:false,
      lists:[
        {
          cla:'btn-1',
          href:'javascript:void(0)',
          val:'c'
        },
        {
          cla:'btn-1',
          href:'javascript:void(0)',
          val:'%'
        },

        {
          cla:'btn-1',
          href:'javascript:void(1)',
          val:'÷'
        },

        {
          cla:'btn-1',
          href:'javascript:void(2)',
          val:'×'
        },

        {
          cla:'',
          href:'javascript:void(3)',
          val:'7'
        },

        {
          cla:'',
          href:'javascript:void(4)',
          val:'8'
        },

        {
          cla:'',
          href:'javascript:void(5)',
          val:'9'
        },

        {
          cla:'btn-1',
          href:'javascript:void(6)',
          val:'-'
        },

        {
          cla:'',
          href:'javascript:void(7)',
          val:'4'
        },

        {
          cla:'',
          href:'javascript:void(8)',
          val:'5'
        },

        {
          cla:'',
          href:'javascript:void(9)',
          val:'6'
        },

        {
          cla:'btn-1',
          href:'javascript:void(10)',
          val:'+'
        },

        {
          cla:'',
          href:'javascript:void(11)',
          val:'1'
        },

        {
          cla:'',
          href:'javascript:void(12)',
          val:'2'
        },

        {
          cla:'',
          href:'javascript:void(13)',
          val:'3'
        },

        {
          cla:'btn-2',
          href:'javascript:void(14)',
          val:'='
        },

        {
          cla:'btn-3',
          href:'javascript:void(15)',
          val:'0'
        },

        {
          cla:'',
          href:'javascript:void(16)',
          val:'.'
        },

      ]
    }
  },
  methods:{
    handleFocus(){
      blur();
    },
    handleClick(val){
      switch(val){
        case 'c':
        this.num1=0;
        this.num2='';
        break;

        case '%':
        this.count('%');
        break;

        case '÷':
        this.count('/');
        break;

        case '×':
        this.count('*');
        break;

        case '-':
        this.count('-');
        break;

        case '+':
        this.count('+');
        break;

        case '=':
        this.s || (this.num2 += this.num1);
        this.num1=eval(this.num2.toString().replace(/\%\/\*\-\+/,''));
        this.num1=this.num1.toString().substr(0,10).replace('NaN',0);
        this.s=true;
        break;

        case '.':
        if(this.num1.toString().search(/[\.\%\/\*\-\+]/) != -1)
        break;

        default:
        this.s && (this.num1=0, this.num2='', this.s=false);
        this.num1.toString().length < 10 && (this.num1=(this.num1 + val).replace(/^[0\%\/\*\-\+](\d)/,"$1"));

      }
    },
    count(a){
      if(this.s){
        this.num2=this.num1 + a;
        this.num1=a;
        this.s=false;
      }
      else{
        /[\%\/\*\-\+]$/.test(this.num1) || (this.num2 += this.num1);
        this.num1=a;
        /[\%\/\*\-\+]$/.test(this.num2) || (this.num2 += this.num1);
        this.num2=this.num2.slice(-1) != a ? this.num2.replace(/.$/,a) : this.num2;
      }
    }
  }
}
</script>