VUE框架监听属性值的变化------VUE框架

旧约Alatus

已于 2023-11-28 21:45:05 修改

阅读量1.1k

点赞数 25

分类专栏： # VUE框架前端文章标签： vue.js 前端 javascript html5 ecmascript vue 前端框架

于 2023-11-28 14:54:24 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/134667669

版权

前端同时被 2 个专栏收录

328 篇文章 2 订阅

订阅专栏

VUE框架

249 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        数字:<input type="text" v-model:value="value"/>
    </div>
    <script>
        const vm = new Vue({
            data : {
                msg : "Hello",
                value : ""
            },
            computed : {
                hehe()
                {
                    return "hehe" + this.value;
                }
            },
            watch : {
                //可以监视多个属性的
                // 监视什么属性,就把什么属性放在这即可
                value : {
                    immediate : true,
                    // 这里有一个固定写死的方法就叫handler
                    // handler什么时候被调用
                    handler(newValue,oldValue)
                    {
                        // 这个方法在被监视参数变化时自动调用
                        // handler有两个参数,第一个是newValue,另外一个是oldValue
                        // newValue是属性改变后的新数值,oldValue是改变前的老数值
                        console.log("自带的老的" + oldValue);
                        console.log("自带的新的" + newValue);
                    }
                },
                // 可以监视一般属性也可以监视计算属性
                hehe : {
                    handler(newValue,oldValue)
                    {
                        console.log("hh的老的" + oldValue);
                        console.log("hh的新的" + newValue);
                    }
                }
            }
        });
        vm.$mount("#app");
    </script>
</body>
</html>
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

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

</head>

<body>

<div id="app">

<h1>{{msg}}</h1>

数字:<input type="text" v-model:value="value"/>

</div>

<script>

const vm = new Vue({

data : {

msg : "Hello",

value : ""

},

computed : {

hehe()

{

return "hehe" + this.value;

}

},

watch : {

//可以监视多个属性的

// 监视什么属性,就把什么属性放在这即可

value : {

immediate : true,

// 这里有一个固定写死的方法就叫handler

// handler什么时候被调用

handler(newValue,oldValue)

{

// 这个方法在被监视参数变化时自动调用

// handler有两个参数,第一个是newValue,另外一个是oldValue

// newValue是属性改变后的新数值,oldValue是改变前的老数值

console.log("自带的老的" + oldValue);

console.log("自带的新的" + newValue);

}

},

// 可以监视一般属性也可以监视计算属性

hehe : {

handler(newValue,oldValue)

{

console.log("hh的老的" + oldValue);

console.log("hh的新的" + newValue);

}

}

}

});

vm.$mount("#app");

</script>

</body>

</html>