numberpad组件功能实现

import Vue from 'vue';
import {Component} from 'vue-property-decorator';
@Component
export default class NumberPad extends Vue {
  output = '0';  // 输出的数字为字符串类型
  outputChange(event: MouseEvent) {
    // vue会读取div的内容
    const input = event.target.textContent;
    if (this.output.length === 16) {return;}
    if (this.output === '0') {
      if ('0123456789'.indexOf(input) >= 0) {
        this.output = input;
      } else {
        this.output += input;
      }
      return
    }
    if (this.output.indexOf('.') >= 0 && input === '.') {
      return;
    }
    this.output += input;
  }
  deleteLast(){
    if(this.output.length === 1) {
      this.output = '0'
    } else {
      this.output = this.output.slice(0,-1)   // -1表示最后一个元素
    }
  }
  clear(){
    this.output = '0'
  }
}
</script>

如果webstorm提示你某个值可能为null，可强制指定类型

// 1. 用 as
event.target as HTMLButtonElement
// 2. 用感叹号
event.target!