vue监视属性

最新推荐文章于 2024-03-17 12:22:11 发布

我艾边城

最新推荐文章于 2024-03-17 12:22:11 发布

阅读量68

点赞数

分类专栏： vue笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_47320417/article/details/121216929

版权

vue笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!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">
    <script type="text/javascript" src="js/vue.js"></script>
    <title>Document</title>
</head>
<body>
        <div id="root">   
                <h5>今天天气很{{info}}</h5>
               <button @click="changeWether">切换天气</button>          
                <hr/>              
             </div>
        <script type="text/javascript">
       const vm= new Vue({
           el:'#root',
           data:{
             isHot:true,
           },
         computed:{
             info(){
               return this.isHot?'炎热':'寒冷'
             }
         },
         methods: {
             changeWether(){
                 this.isHot=!this.isHot
             }
         },
        watch:{
          isHot:{
            immediate:true,
            handler(newValue,oldValue){
              console.log('isHot被修改',newValue,oldValue)
            }
          }
        }
        })
        
        
        </script>
</body>
</html>