vue-property-decorator组件的使用

<template>
  <div>
    <input v-model="inputValue" @input="handleInput">
    <p>输入的内容是：{{ inputValue }}</p>
  </div>
</template>
 
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
 
@Component
export default class MyComponent extends Vue {
  private inputValue: string = '';
 
  handleInput(event: Event) {
    const input = event.target as HTMLInputElement;
    this.inputValue = input.value;
  }
}
</script>

这个例子展示了如何在Vue组件中使用vue-property-decorator来处理用户输入。组件包括一个文本输入框和一个段落，显示用户输入的内容。通过v-model实现数据的双向绑定，并使用@input事件处理函数handleInput来更新数据。这里的handleInput方法利用了TypeScript的类型系统来确保event.target是HTMLInputElement类型。