<div id="root">
      <h2>今天天气很{{info}}</h2>
      <button @click="changeWeather">切换天气</button>
    </div>
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)
    }) */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js