07： vue3 侦听器

 1 <template>
 2     <p>{{ message }}</p>
 3     <button @click="updateHandle()">修改数据</button>
 4 </template>
 5 
 6 <script>
 7 export default{
 8     data(){
 9         return{
10             message:"Hello"
11         }
12     },
13     methods:{
14         updateHandle(){
15             this.message="World"
16         }
17     },
18     //侦听器
19     watch:{
20         //newValue:变化之后的数据
21         //oldValue:变化之前的数据
22         //函数名必须与侦听的数据对象名一致
23         message(newValue,oldValue){
24             //可以加入数据变化后，自动执行的函数
25             console.log(newValue,oldValue);
26         }
27 
28     }
29 }
30 </script>

posted on 2023-07-04 16:01 wuzx-blog 阅读(20) 评论(0) 编辑收藏举报