通过天气案例学习vue的计算属性和监控属性_使用计算属性弄天气怎么设置-CSDN博客

本文链接：https://blog.csdn.net/zhuyacheneagle/article/details/123772390

计算属性computed里面可以写一些函数用于处理要显示的动态变化的信息，监控属性watch可以监控某个变量的状态然后再去执行对应的方法。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>天气案例</title>
</head>

<body>
  <div id="app">
    <!-- 1、插值动态显示，由计算属性返回 -->  
    <span>今天天气很{{info}}</span>
    <!-- 3、@click点击触发切换天气方法 -->
    <button @click="changeWeather">切换天气</button>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el:"#app",
      data:{
        isHot: true,
      },
      computed: {
        //2、这里info是一个函数,通过标识返回具体天气情况   
        info(){
            return this.isHot?'炎热':'凉爽'
        }
      },
      methods:{
        changeWeather() {
            this.isHot = !this.isHot
        }
      },
    })
    //4、这里监视isHot是否变化
    vm.$watch('isHot', {
        handler(newvalue, oldvalue) {
            console.log('isHot被修改了', newvalue, oldvalue)
        }
    })
  </script>
</body>

</html>