Vue实例选项之【watch】

最新推荐文章于 2022-11-29 10:00:53 发布

技术的搬运工

最新推荐文章于 2022-11-29 10:00:53 发布

阅读量232

点赞数

分类专栏： Vue.js 文章标签： vue

本文链接：https://blog.csdn.net/IT_Boy_/article/details/114048146

版权

Vue.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了Vue中`watch`选项的用法，通过实例展示了如何监听数据变化并响应。当`counter`或`kilometers/meters`改变时，会触发相应的回调函数，实现数据的联动更新。同时，文章还演示了`$watch`实例方法的使用，动态监听`counter`和`kilometers`的变化，并展示在界面上。

摘要由CSDN通过智能技术生成

watch

我们可以通过 watch 来响应数据的变化。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue实例选项之【watch】</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <p style="font-size: 25px;">计数器：{{counter}}</p>

        <!-- 每点击一下 counter 的值就加 1，由于监听着 counter, 所以 counter 改变时就会回调定义的监听函数-->
        <button @click="counter++" style="font-size: 25px;">点我点我</button>

        <br>
        <br>
        <br>

        千米：<input type="text" v-model="kilometers">
        米：<input type="text" v-model="meters">

        <p id="info"></p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                counter: 1,

                kilometers: 0,
                meters: 0
            },

            watch: {
                // counter: function(nval, oval){
                //     alert('计数器值的变化：' + oval + ' 变为 ' + nval + ' !');
                // },

                // 监听的是某个数据属性的改变时，执行定义的函数
                kilometers: function (val) {
                    this.kilometers = val;
                    this.meters = this.kilometers * 1000;
                },
                meters: function (val) {
                    this.kilometers = val / 1000;
                    this.meters = val;
                }
            }
        });

        vm.$watch('counter', function (nval, oval) {
            alert('计数器值的变化：' + oval + ' 变为 ' + nval + ' !');
        })

        // $watch 是一个实例方法
        vm.$watch('kilometers', function (newValue, oldValue) {
            // 这个回调将在 vm.kilometers 改变后使用
            document.getElementById("info").innerHTML = "修改前值为：" + oldValue + ", 修改后值为：" + newValue;
        })
    </script>
</body>
</html>