Vue学习笔记五：侦听属性watch

<template>
  <div class="box">
    <p>今日温度：{{wendu}}℃</p>
    <p>穿衣建议：{{clothing}}</p>
    <p><button @click="up">升高温度</button><button @click="down">降低温度</button></p>
  </div>
</template>
<script>
export default {
  data () {
    return {
     wendu:14,
      clothing:'夹克长裙',
      clothings: ['T恤短袖','夹克长裙','棉衣羽绒服']
    }
  },
  methods:{
    up() {
        this.wendu += 5;
    },
    down() {
        this.wendu -= 5;
    }
  },
  watch:{//数据监控
    wendu(newVal,oldVal) {
        if (newVal >= 26) {
            this.clothing = this.clothings[0];
        } else if(newVal < 26 && newVal >= 0){
            this.clothing = this.clothings[1];
        } else {
            this.clothing = this.clothings[2];
        }
    }
  }
}
</script>