>[success] ##### ~~~ <template> <div class="home"> <div class="todo-list"> 测试watch 方法 <input v-model="firstName">+<input v-model="lastName"> = {{fullName}} <ul> <li @click="handleCancel(item)" v-for="(item, index) in list" :key="index">{{item.text}}</li> </ul> </div> </div> </template> <script lang="ts"> import { Component, Prop, Vue, Watch } from 'vue-property-decorator'; // 等同于components子组件注册的位置 // 这个必须写，当前类的装饰器指的是当前类'Home' 是一个组件装饰 必须要声明 // @Component 修饰符注明了此类为一个 Vue 组件 @Component({ // 等同原来的组件名 name: 'Home', // 等同以前的components，注册组件使用 components: { } }) export default class Home extends Vue { // 等同于 data(){return {name:'wang',age:17}} // 现在的data 直接写在class 内用装饰符修饰。public 可以省略默认public public list = [{ text:'测试数据1', complete:false },{ text:'测试数据2', complete:false }] public firstName:string = "" public lastName:string = "" public fullName:string = "" // js 版本的vue 用法 method(){} // 现在在ts 中直接 声明方法使用即可 public handleCancel(item){ item.text = "测试数据2" } @Watch('firstName') public firstNameChange(newVal:string, oldVal:string){ this.fullName = newVal + this.lastName } @Watch('lastName') public lastNameChange(newVal:string, oldVal:string){ this.fullName = this.firstName + newVal } // watch: { // firstName(newVal，oldVal){ // this.fullName = newVal + this.lastName // }, // lastName(newVal，oldVal){ // this.fullName = this.firstName + newVal // } // } } </script> ~~~