监视属性watch

最新推荐文章于 2023-03-10 12:26:49 发布

一只829

最新推荐文章于 2023-03-10 12:26:49 发布

阅读量180

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_63533863/article/details/122511895

版权

监视属性watch:
1.当被监视的属性变化时，回调函数自动调用，进行相关操作
2.监视的属性必须存在，才能进行监视! !
3.监视的两种写法:
(1). new . Vue时传入watch配置
(2) .通过vm，$watch监视

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <title>初识vue</title>
   <!--引入vue-->
    <script type="text/javascript"src="../js/vue.js"></script>
</head>
<body>
    <!--准备好一个容器-->
    <div id="root">
        <h1>今天天气很{{info}}</h1>
        <button @click="changeWeather">切换天气</button>
    </div>

    <script type="text/javascript">
       Vue.config.productionTip=false//组织vue在启动时生成生产提示

       new Vue({
           el:'#root',//el用于制定当前vue实例为哪个容器服务，值通常为css选择字符串
           data: {
               isHot:true//data中用于存储数据，数据供el所制定的容器去使用，值我们暂时先携程一个对象
           },
           computed:{
               info(){
                   return this.isHot?'炎热':'凉爽'
               }
           },
           methods:{
               changeWeather(){
                   this.isHot=!this.isHot
               }
        
           },
           watch:{//事件监听
               isHot:{
                   immediate:true,//立即执行
                   //handler什么时候调用?当ishot发生变化时
                   handler(newValue,oldValue){
                       console.log('isHot被修改了',newValue,oldValue)
                   }
               }
           }
           
       })
  
    </script>
</body>
</html>