vue學習---監視屬性簡寫
阿新 • • 發佈：2021-11-13
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>天氣案例_監視屬性_簡寫</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 準備好一個容器--><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呼叫一下 // deep:true,//深度監視 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } }, */ //簡寫 /* isHot(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue,this) } */ } }) //正常寫法 /* vm.$watch('isHot',{ immediate:true, //初始化時讓handler呼叫一下 deep:true,//深度監視 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } }) */ //簡寫 /* vm.$watch('isHot',(newValue,oldValue)=>{ console.log('isHot被修改了',newValue,oldValue,this) }) */ </script> </html>