vue学习笔记（19）——监视的简写形式

最新推荐文章于 2024-06-12 22:18:06 发布

weixin_54763080

最新推荐文章于 2024-06-12 22:18:06 发布

阅读量59

点赞数

分类专栏： vue学习笔记文章标签：学习 vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_54763080/article/details/128840632

版权

vue学习笔记专栏收录该内容

19 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>天气案例_监视属性_简写</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
 <h2>今天天气很{{info}}</h2>
 <button @click="changeweather">切换天气</button>
</div>
 
<script type="text/javascript">
Vue.config.productionTip=false


const vm=new Vue({
    el:'#root',
    data:{
        ishot:true,
        
    },
    computed:{
        info(){
            return this.ishot?'hot':'cool'
        }
    },
    methods:{
        changeweather(){
            this.ishot=!this.ishot
        },

    },

    watch:{
        //正常写法
       /* // 计算属性也可以被监视
        ishot:{
            // immediate:true,//初始化时让handler调用一下
            // deep:true,//深度监视
             // handler当ishot发生改变时调用
            handler(newValue,oldValue){
                console.log('ishot被调用了',newValue,oldValue)
            }
        },*/

        //简写
        // ishot(newValue,oldValue){
        //     console.log('ishot被调用了',newValue,oldValue)
        // }

    }
})
//正常写法
// vm.$watch('ishot',{
//             immediate:true,//初始化时让handler调用一下
//             deep:true,//深度监视
//              // handler当ishot发生改变时调用
//              handler(newValue,oldValue){
//                 console.log('ishot被调用了',newValue,oldValue)
//             }
// })

 //简写
vm.$watch('ishot',function(newValue,oldValue){
    console.log('ishot被调用了',newValue,oldValue)
})
</script>
</body>
</html>