vue数据监听

最新推荐文章于 2024-07-17 14:21:52 发布

可爱的瞌睡虫

最新推荐文章于 2024-07-17 14:21:52 发布

阅读量404

点赞数

文章标签： vue 数据监听

本文链接：https://blog.csdn.net/qq_42848534/article/details/89974224

版权

数据监听

1.什么是数据监听?

需求: 有的时候我们想要在一些数据变化之后做出处理, 使用数据监听, 去监听这些数据

1.1.如何实现数据监听?

给实例添加watch, watch是个对象, 里面都是一个一个监听的数据

watch:{

属性名:处理函数,

}

2.实例

<!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>Document</title>
</head>
<body>

    <div id="app">
        {{msg}}

        <div>
                <button @click="num--">-</button>
                {{num}}
                <button @click="num++">+</button>
        </div>
        <div v-html="info">
            <!-- {{info}} -->
        </div>
    </div>

 
    <script src="js/vue/vue.js"></script>
    <script>


        var data = {
            msg:"hello world",
            num:1,
            info:""
        }

        var app = new Vue({
            data:data,
            el:"#app",

            watch:{
                num(newValue, oldValue){
                    this.info += "旧的值是"+oldValue+" 新的值是"+newValue+"<br>"
                }
            }
        })


    </script>
    
</body>
</html>