>[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> ~~~