vue學習---監視屬性
阿新 • • 發佈：2021-11-13
監視屬性watch：
1.當被監視的屬性變化時, 回撥函式自動呼叫, 進行相關操作
2.監視的屬性必須存在，才能進行監視！！
3.監視的兩種寫法：
(1).new Vue時傳入watch配置
(2).通過vm.$watch監視
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>天氣案例_監視屬性</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 監視屬性watch： 1.當被監視的屬性變化時, 回撥函式自動呼叫, 進行相關操作 2.監視的屬性必須存在，才能進行監視！！ 3.監視的兩種寫法： (1).new Vue時傳入watch配置 (2).通過vm.$watch監視--> <!-- 準備好一個容器--> <div id="root"> <h2>今天天氣很{{info}}</h2> <button @click="changeWeather">切換天氣</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false//阻止 vue 在啟動時生成生產提示。 const vm = new Vue({ el:'#root', data:{ isHot:true, }, computed:{ info(){ return this.isHot ? '炎熱' : '涼爽' } }, methods: { changeWeather(){this.isHot = !this.isHot } }, /* watch:{ isHot:{ immediate:true, //初始化時讓handler呼叫一下 //handler什麼時候呼叫？當isHot發生改變時。 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } } } */ }) vm.$watch('isHot',{ immediate:true, //初始化時讓handler呼叫一下 //handler什麼時候呼叫？當isHot發生改變時。 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } }) </script> </html>