<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>4.天气案例_监视简写</title> <script type="text/javascript" src="../vue.js"></script> </head> <body> <div id="root"> <h3>今天天气很{{showInfo}}</h3> <button @click="changeWeather">切换天气</button> </div> <script> Vue.config.productionTip = false const vm = new Vue({ el: "#root", data: { 'isHot': true, }, computed: { showInfo() { return this.isHot ? '炎热' : '凉爽' } }, methods: { changeWeather() { this.isHot = !this.isHot } }, watch: { // // 完整写法 // isHot: { // immediate: true, // deep: true, // handler(newValue, oldValue) { // console.log('isHot 被修改', newValue, oldValue) // } // } , // // 简写写法 // isHot(newValue, oldValue) { // console.log('isHot 被修改', newValue, oldValue) // } } }) // 外置完整写法 // vm.$watch('isHot', { // immediate: true, // deep: true, // handler(newValue, oldValue) { // console.log('isHot 被修改', newValue, oldValue) // } // }) // 外置简写写法 vm.$watch('isHot', function(newValue, oldValue){ console.log('isHot 被修改', newValue, oldValue) }) </script> </body> </html>