11. Money组件功能实现

NumberPad模块获取输入

output = '0'
// method不传参数，则默认传event
  inputContent(event: MouseEvent) {
    let button = event.target as HTMLButtonElement;
    let input = button.textContent!;  // !代表不为null
    if (this.output.length === 16) {return;}
    if (this.output === '0' && '0123456789'.indexOf(input) >= 0) {
      this.output = input;
      return;
    }
    if (this.output.indexOf('.') >= 0 && input === '.') {
      return;
    }
    this.output += input;
  }

  remove() {
    if (this.output.length === 1) {
      this.output = '0';
    } else {
      this.output = this.output.slice(0, -1);
    }
  }

  clear() {
    this.output = '0';
  }

Notes模块

  <input type="text"
             :value="xxx"
             @input="xxx = $event.target.value"
             placeholder="请输入备注">

改用v-model, xxx一般命名为value

  <input type="text" 
         v-model="xxx"
         placeholder="请输入备注">

Tags模块

知识点：

• v-for的使用
• class绑定对象
• .sync修饰符 ```vue

```